Ajax get undefined List from restful API

Question

I tried search first but no fix. here is my jQuery code.

 var rootUrl = "http://" + window.location.host + "/Blog/rest/posts"; var allPosts = function() { $.ajax({ type : 'GET', url : rootUrl, dataType : "json", success : renderAllPosts }); }; var renderAllPosts = function(data) { $.each(data, function(index, post) { alert(data); // returns [object Object] alert(post); // returns [object Object],[object Object] $('#allPosts').append( '<a href=posts/' + post.ID + '><h3 id="animation_style">' + post.title + '</h3></a><hr>'); }); } $(document).ready(function() { // alert(window.location.host); allPosts(); }); 

Here is the data that rootUrl returns

When I only have one record in database it works fine... I have no idea why alert(post) returns two objects. I think it should be alert(data) returns two objects.

keep getting this

Answer 1

your data, has an attribute called postModel, you should change this:

var renderAllPosts = function(data) {
    $.each(data, function(index, post) {
        alert(data); // returns [object Object]
        alert(post);    // returns [object Object],[object Object]
        $('#allPosts').append('<a href=posts/' + post.ID + '><h3 id="animation_style">'+ post.title + '</h3></a><hr>');
    });
}

For:

var renderAllPosts = function(data) {
    $.each(data.postModel, function(index, post) {
        alert(data); // returns [object Object]
        alert(post);    // returns [object Object],[object Object]
        $('#allPosts').append('<a href=posts/' + post.ID + '><h3 id="animation_style">'+ post.title + '</h3></a><hr>');
    });
}

That way, you'll cycle through the array of posts