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

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

“数据”仅限于其可见的函数；您在使用它的地方也需要识别它。

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

    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();

            });
        });
      });