2013-04-07 103 views
0

我正在嘗試學習一些前端工程,但卻陷入了一件應該很容易做的事。我檢查了其他問題,並試圖嵌套$each推薦通過AJAX響應進行迭代

我有一個簡單的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>,如果這是密切相關。謝謝你的幫助。

+3

'$ .each(list,function)'應該是'$ .each(data.book,function)',應該不是嗎? – 2013-04-07 23:21:36

+3

您正在迭代的'list'變量永遠不會被定義。那應該是數據嗎?如果是這樣的話,試試'$ .each(data.book,function(index,book){' – 2013-04-07 23:23:18

+0

,甚至在數據中你不應該訪問它作爲data.data [0] .book? – theshadowmonkey 2013-04-07 23:23:53

回答

4

您的書籍數組在您的JSON響應中被book屬性引用。

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

注:您應該在一個變量被緩存$('#bookList')不是檢索它爲每個迭代。

+0

這個技巧。感謝plalx! – rpmartz 2013-04-07 23:29:48