Question

我想从JSON数组中获取数据，如下所示，因此this.responceText返回此数据。我尝试使用我的Javascript代码中的数据，但它不起作用，也没有错误消息。我的代码哪里错了？感谢。

{"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);
}

Answer 1

由于您的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);
});

Answer 2

您的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);
});

Answer 3

文字对象没有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>

Answer 4

您正在使用JSON对象而不是数组。并且＆＃39;长度＆＃39;不是Array的属性。

所以它迭代这个，你可以使用：

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

如何使for循环从JSON数组中获取数据

4 个答案: