如何使循環從JSON數組中獲取數據

我想從JSON數組中獲取數據，如下所示，所以this.responceText返回此數據。我嘗試使用我的Javascript代碼中的數據，但它不工作，也沒有錯誤消息。我的代碼中哪裏出錯？謝謝。如何使循環從JSON數組中獲取數據

{"0":{"folder":"callofthewild","title":"Call of the Wild"},"1":{"folder":"2001spaceodyssey","title":"2001: A Space Odyssey "},"2":{"folder":"hobbit","title":"The Hobbit"},"4":{"folder":"pokemon","title":"I Choose You! (Pokemon Chapter Books)"},"5":{"folder":"alannathefirstadventure","title":"Alanna: The First Adventure (Song of the Lioness #1)"}}

我的一部分javascript;

var books = JSON.parse(this.responseText); 

for (var i = 0; i < books.length; i++) { 
    var book = document.createElement("div"); 
    var text = document.createElement("p"); 
    var image = document.createElement("img"); 
    image.src = "books/" + books.i.folder + "/cover.jpg"; 
    text.innerHTML = books.i.title; 

    book.appendChild(image); 
    book.appendChild(text); 
    document.getElementById("allbooks").appendChild(book); 
}

來源

2017-05-22 Andy Anderson

'books.length'將返回'undefined'，因爲你的JSON是不是一個數組，它是一個對象 –

如果你是一個創建服務器響應，考慮使用一個數組而不是一個對象，因爲它沒有任何意義，因爲它是一個對象。 – James

'因爲你的JSON不是一個數組，它是一個對象' - 實際上，JSON是一個字符串，OP處理的是一個普通的ol對象：p –

由於您的JSON是一個對象（不是數組），你可以使用Object.keys()得到它的所有按鍵，然後遍歷它的鍵來獲取此時，相應的值：

var books = JSON.parse(this.responseText); 
Object.keys(books).forEach(function (index) { 
    var book = books[index]; 
    var div = document.createElement("div"); 
    var text = document.createElement("p"); 
    var image = document.createElement("img"); 
    image.src = 'books/' + book.folder + '/cover.jpg'; 
    text.innerHTML = book.title; 
    div.appendChild(image); 
    div.appendChild(text); 
    document.getElementById('allbooks').appendChild(div); 
});

來源

2017-05-22 02:56:36

你JSON是不是數組..所以你.length將undefined

$.each(books, function(i, n) { 
    var book = document.createElement("div"); 
    var text = document.createElement("p"); 
    var image = document.createElement("img"); 
    alert(books[""+i+""].folder) 
    image.src = "books/" + n.folder + "/cover.jpg"; 
    text.innerHTML = n.title; 

    book.appendChild(image); 
    book.appendChild(text); 
    document.getElementById("allbooks").appendChild(book); 
});

來源

2017-05-22 02:59:01

那麼庫是什麼？ OP中的標籤在哪裏？ – RobG

多數民衆贊成在jQuery ..你可以使用，或使用正常的JavaScript。 jquery會很容易循環 –

jquery看起來更容易使用。但提供的HTML代碼，我不能使用任何庫...謝謝你的答案，但！ –

一個文本對象具有不length財產。

var books = { 
 
    "0": { 
 
    "folder": "callofthewild", 
 
    "title": "Call of the Wild" 
 
    }, 
 
    "1": { 
 
    "folder": "2001spaceodyssey", 
 
    "title": "2001: A Space Odyssey " 
 
    }, 
 
    "2": { 
 
    "folder": "hobbit", 
 
    "title": "The Hobbit" 
 
    }, 
 
    "4": { 
 
    "folder": "pokemon", 
 
    "title": "I Choose You! (Pokemon Chapter Books)" 
 
    }, 
 
    "5": { 
 
    "folder": "alannathefirstadventure", 
 
    "title": "Alanna: The First Adventure (Song of the Lioness #1)" 
 
    } 
 
}; 
 

 
Object.keys(books) 
 
    .map(key => books[key]) 
 
    .forEach(book => { 
 
     var div = document.createElement("div"); 
 
     var text = document.createElement("p"); 
 
     var image = document.createElement("img"); 
 
    
 
     image.src = "books/" + book.folder + "/cover.jpg"; 
 
     text.innerHTML = book.title; 
 

 
     div.appendChild(image); 
 
     div.appendChild(text); 
 
    
 
     document.getElementById("allbooks").appendChild(div); 
 
});

<div id="allbooks"></div>

來源

2017-05-22 03:03:01

您正在使用JSON對象，而不是一個數組。而'長度'不是Array的屬性。

所以遍歷這個，你可以使用：

for (var bookKey in books) { 
    var book = books[bookKey]; 
    // And create html content here 
}

來源

2017-05-22 05:05:25 Siva

如何使循環從JSON數組中獲取數據

回答

相關問題