Uncaught TypeError: Cannot read property ‘length’ of undefined

I’m working on a jquery mobile script to get json from my wordpress site but its not displaying anything and returns with a: ‘Uncaught TypeError: Cannot read property ‘length’ of undefined’ error. I know i’m messing up somewhere with parsing the json, but i happen to be a javascript noob. To the guy that both fixes and explains it to me, i thank you.

HTML:
ListView

Read More
    <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>

PageView

<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');
    }
}

Related posts

Leave a Reply

1 comment

    1. There is no function $.parseJSONP it’s $.parseJSON without “P”. Anyway, you don’t need to parse the returned Ajax result since it is ready to be populated.

    2. The returned array has no .results property, it is .posts.

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

    Fixed code

    $(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');
    };