迭代AJAX响应

Iterating over AJAX response

本文关键字：响应 AJAX 迭代      更新时间：2023-09-26

我试图学习一些前端工程，但是我被一些本应该很容易做到的事情所困扰。我检查了其他问题，并尝试了嵌套的$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>。谢谢你的帮助。

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

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

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

相关文章：