遍历AJAX响应

Question

I'm trying to learn some front end engineering, but am getting caught up on what should be an easy thing to do. I've checked other questions, and tried the nested $each recommended

I have a simple REST API that I wrote that returns this JSON when the page loads:

{"book":    
[{"authorFirstName":"Clive","authorLastName":"Cussler","genre":"Fiction","title":"Inca    
Gold"},{"authorFirstName":"Og","authorLastName":"Mandino","genre":"Self
Improvement","title":"The Greatest Salesman in the World"}, 
{"authorFirstName":"Bill","authorLastName":"O'Reilly","genre":"History","title":"Killing 
Lincoln"}]}

The problem is not getting this from the server; I get this when the page loads or when I go to the REST URL. I'm having trouble rendering the page though. Here's my AJAX call and success function:

function getAllBooks() {
    console.log("Getting all books");
        $.ajax({
            type: 'GET',
            url: rootURL, 
            dataType: "json",
            success: renderBookList
        });
}

function renderBookList(data) {
    $('#bookList li').remove();
    $.each(data, function(index, book) {
        $('#bookList').append('<li><a href="#">' + book.title + '</a></li>');
    });
} 

If I change the line inside the $each function to be book[0].title , then I get the title for the first book in the JSON.

What am I missing? Is the issue with the JSON, that it's an object with one property (but the property is an array of objects)?

The server is JAX-RS and returns an ArrayList<Book> if that's germane. Thanks for any help.

Answer 1

Your book array is referenced by the book property in your JSON response.

function renderBookList(data) {
    $('#bookList li').remove();
    $.each(data.book, function(index, book) {
        $('#bookList').append('<li><a href="#">'+ book.title +'</a></li>');
    });
}

NOTE: You should be caching $('#bookList') in a variable instead of retrieving it for each iterations.