I would like to grab a data from JSON array, which looks like below, and so this.responceText
returns this data. And I try to use the data from my Javascript code, but it is not working, and also there is no error message. Where is wrong in my code? Thanks.
{"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)"}}
part of my 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);
}
Since your JSON is an object (not an array), you can use Object.keys() to get all its keys and then iterate over its keys to get the appropiate values:
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);
});
Your json is not an array.. so your .length
will be 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);
});
A literal object hasn't length
property.
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>
You are using JSON Object and not an array. And 'length' is not a property for Array.
So it iterate over this, you can use:
for (var bookKey in books) {
var book = books[bookKey];
// And create html content here
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.