Question

修改

这是我的请求的日志

$("#search_button").click(function(){
        var search = document.getElementById('search_text').value;
        $.post('http://127.0.0.1:5000/search', {search_text: search, num_results: 2}, function(data, textStatus, xhr) {

            console.log(data);

        });
    });

的背景

我从我的服务器获取一些数据并尝试使用Onsen UI框架的无限列表在我的页面上显示它但我收到cannot access property 'text' of undefined错误。我确实使用console.log(data)看到数据，所以我希望请求没有问题。如果有人能解释我在这里做错了什么，我真的很感激？谢谢

此作品

我在获取数据之前尝试了一个基本的例子

ons.ready(function() {
  var data = [{"text":"Title 1"}, {"text":"Title 2"}]
  var infiniteList = document.getElementById('infinite-list');

  infiniteList.delegate = {
    createItemContent: function(i) {
      return ons.createElement(`<ons-list-item>
                                    <p style="color:DodgerBlue;">`+data[i].text+`</p>
                                    <img style="width:100%;" src="http://images.all-free-download.com/images/graphiclarge/beautiful_scenery_04_hd_pictures_166258.jpg"/>
                                </ons-list-item>`);
    },
    countItems: function() {
      return data.length;
    }
  };

  infiniteList.refresh();
});

这不起作用

 ons.ready(function(){

    $("#test_button").click(function(){

        $.post('http://127.0.0.1:5000/search', {search_text: 'car', num_results: 2}, function(data, textStatus, xhr) {

            /*after success */

            var infiniteList = document.getElementById('infinite-list');

            infiniteList.delegate = {
            createItemContent: function(i) {
              return ons.createElement(`<ons-list-item>
                                            <p style="color:DodgerBlue;">`+data[i]+`</p>
                                            <img style="width:100%;" src="http://images.all-free-download.com/images/graphiclarge/beautiful_scenery_04_hd_pictures_166258.jpg"/>
                                        </ons-list-item>`);
            },
            countItems: function() {
              return 2;
            }
          };

          infiniteList.refresh();

        });
    });
  });

Answer 1

＆＃39;数据＆＃39;仅限于可见的功能;它也需要在你使用它的地方得到认可。

使用在两个函数之外声明的另一个变量。

    var dataUse = [];//----------declare here so it is visible in every scope
     ons.ready(function(){

        $("#test_button").click(function(){

            $.post('http://127.0.0.1:5000/search', {search_text: 'car', num_results: 2}, function(data, textStatus, xhr) {

                /*after success */
                dataUse = data;
                var infiniteList = document.getElementById('infinite-list');

                infiniteList.delegate = {
                createItemContent: function(i) {
                  return ons.createElement(`<ons-list-item>
                                                <p style="color:DodgerBlue;">`+dataUse[i]+`</p>
                                                <img style="width:100%;" src="http://images.all-free-download.com/images/graphiclarge/beautiful_scenery_04_hd_pictures_166258.jpg"/>
                                            </ons-list-item>`);
                },
                countItems: function() {
                  return 2;
                }
              };

              infiniteList.refresh();

            });
        });
      });

显示传入数据流 - 无法访问未定义的属性

1 个答案: