如何使循环从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数组中获取数据

回答

相关问题