Question

我正在尝试学习一些前端工程，但我很想知道什么应该是一件容易的事情。我已经检查了其他问题，并尝试了嵌套的$each推荐

我编写了一个简单的REST API，在页面加载时返回此JSON：

{"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"}]}

问题不是来自服务器;我在页面加载或转到REST URL时得到这个。我在渲染页面时遇到了麻烦。这是我的AJAX调用和成功函数：

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

如果我将$each函数中的行更改为book[0].title，那么我将获得JSON中第一本书的标题。

我错过了什么？是JSON的问题，它是一个具有一个属性的对象（但属性是一个对象数组）？

服务器是JAX-RS并返回ArrayList<Book>，如果这是密切关系的话。谢谢你的帮助。

Answer 1

您的书籍数组由JSON响应中的book属性引用。

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

注意：您应该在变量中缓存$('#bookList')，而不是为每次迭代检索它。

迭代AJAX响应

1 个答案: