未捕獲的TypeError：無法讀取未定義的屬性“ length”

Question

我正在使用jquery移動腳本從我的wordpress網站獲取json，但它不顯示任何內容，並返回以下消息：'Uncaught TypeError：無法讀取未定義的'length'屬性'錯誤。 我知道我在解析json時遇到了麻煩，但是我碰巧是一個JavaScript新手。 對於那些既修復又向我解釋的人，謝謝。

HTML：ListView

    <div data-role="page" id="home">
<div data-role="content">
        <div class="example-wrapper" data-iscroll>
            <ul data-role="listview" id="post-list" data-theme="a"></ul>
        </div>
    </div>
</div>

頁面預覽

<div data-role="page" id="headline">
 <div data-role="content">
        <ul data-role="listview" id="post-data" data-theme="a"></ul>
    </div>
    </div>

JavaScript的：

 $(document).on('pageinit', '#home', function () {

                   $.ajax({
                          url: 'http://chris.floppytron.com/api/get_recent_posts/',
                          dataType: "jsonp",
                          success: function (result) {
                          ajax.parseJSONP(result);
                          },
                          error: function (request, error) {
                          alert('Network error has occurred please try again!');
                          }
                          });
                   });

                   $(document).on('pagebeforeshow', '#headline', function () {
                                  $('#post-data').empty();
                                  $.each(postInfo.result, function (i, row) {
                                         if (row.id == postInfo.id) {
                                         $('#post-data').append('<li>' + row.title + '</li>');
                                         $('#post-data').append('<li>' + row.date + '</li>');
                                         $('#post-data').append('<li>' + row.categories + '</li><br />');
                                         $('#post-data').append('<li>' + row.content + '</li>');
                                         $('#post-data').listview('refresh');
                                         }
                                         });
                                  });

                                  $(document).on('vclick', '#post-list li a', function () {
                                                 postInfo.id = $(this).attr('data-id');
                                                 $.mobile.changePage("#headline", {
                                                                     transition: "slide",
                                                                     changeHash: false
                                                                     });
                                                 });

                                                 var postInfo = {
                                                     id: null,
                                                     result: null
                                                 }

var ajax = {
    parseJSONP: function (result) {
        postInfo.result = result.results;
        $.each(result.results, function (i, row) {
               console.log(JSON.stringify(row));
               $('#post-list').append('<li><a href="" data-id="' + row.id + '"><img src="' + row.thumbnail + '"/><h3>' + row.title + '</h3><p>' + row.categories + '</p><br /><p>' + row.date + '</p></a></li>');
               });
               $('#post-list').listview('refresh');
    }
}

Answer 1

1. 沒有$.parseJSONP函數，它是沒有“ P”的$.parseJSON函數。 無論如何，您無需解析返回的Ajax結果，因為它已准備好進行填充。

2. 返回的數組沒有.results屬性，它是.posts 。

    postInfo.result = result.posts; $.each(postInfo.result, function (i, row) { 

固定碼

$(document).on('pagecreate', '#home', function () {
    $.ajax({
        url: 'http://chris.floppytron.com/api/get_recent_posts/',
        dataType: "jsonp",
        success: function (result) {
            addRows(result);
        },
        error: function (request, error) {
            alert('Network error has occurred please try again!');
        }
    });
});

$(document).on('pagebeforeshow', '#headline', function () {
    $('#post-data').empty();
    $.each(postInfo.result, function (i, row) {
        if (row.id == postInfo.id) {
            $('#post-data').append('<li>' + row.title + '</li>');
            $('#post-data').append('<li>' + row.date + '</li>');
            $('#post-data').append('<li>' + row.categories + '</li><br />');
            $('#post-data').append('<li>' + row.content + '</li>');
            $('#post-data').listview('refresh');
        }
    });
});

$(document).on('click', '#post-list li a', function () {
    postInfo.id = $(this).attr('data-id');
    $.mobile.changePage("#headline", {
        transition: "slide",
        changeHash: false
    });
});

var postInfo = {
    id: null,
    result: null
};

function addRows(result) {
    postInfo.result = result.posts;
    $.each(postInfo.result, function (i, row) {
        $('#post-list').append('<li><a href="" data-id="' + row.id + '"><img src="' + row.thumbnail + '"/><h3>' + row.title + '</h3><p>' + row.categories + '</p><br /><p>' + row.date + '</p></a></li>');
    });
    $('#post-list').listview('refresh');
};

演示