API JSON 文件中的循环槽元素

Question

我正在尝试从我的API JSON文件打印HTML中的所有“名称”值，我对Javascript和jquery很陌生，我怎么能做到这一点？这是我的JSON文件，所有的{}，具有相同的结构，但具有不同的信息。

{

"launches": [

{

"id": 2036,

"name": "Electron | Don't Stop Me Now",

"windowstart": "June 11, 2020 04:43:00 UTC",

"windowend": "June 11, 2020 06:32:00 UTC",

},

{},

{},

{},

{},

{},

{},

{},

{},

Answer 1

您可以尝试一个简单的 for 循环或 forEach 循环...&nbsp; // json data&nbsp; let data = {&nbsp; &nbsp; "launches": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 2036,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Electron | Don't Stop Me Now",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "windowstart": "June 11, 2020 04:43:00 UTC",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "windowend": "June 11, 2020 06:32:00 UTC",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 2037,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Don't Stop Me Now",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "windowstart": "June 11, 2020 04:43:00 UTC",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "windowend": "June 11, 2020 06:32:00 UTC",&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]};// function for handling data manipulation&nbsp;function printNames() {&nbsp; &nbsp; let parsed = '';// temp variable for storing it as string&nbsp; &nbsp; for (i = 0; i < data.launches.length; i++) { //iterate through each array item to fin require info&nbsp; &nbsp; &nbsp; &nbsp; parsed += data.launches[i].id + ' ' + data.launches[i].name + "\n";&nbsp; &nbsp; }&nbsp; &nbsp; console.log(parsed)&nbsp; &nbsp; let elem = document.getElementById('container');&nbsp; &nbsp; elem.innerHTML = parsed; //Append it to container}printNames();

Answer 2

var my_object = {&nbsp; &nbsp; "launches": [&nbsp; &nbsp; {&nbsp; &nbsp; "id": 2036,&nbsp; &nbsp; "name": "Electron | Don't Stop Me Now",&nbsp; &nbsp; "windowstart": "June 11, 2020 04:43:00 UTC",&nbsp; &nbsp; "windowend": "June 11, 2020 06:32:00 UTC",&nbsp; &nbsp; }]};for(var i=0; i<my_object.launches.length;i++){&nbsp; &nbsp; console.log(my_object.launches[i].name);}

Answer 3

这就是循环访问对象数组并打印对象特定值的方式jsonObj.launches.forEach(item&nbsp;=>&nbsp;console.log(item.name))

Answer 4

这是执行您建议的简单方法。（我不确定你说的“打印...在 HTML 中“，所以我只是将每个字符串添加到 HTML 代码中的现有列表中。name// An array that might be a JSON response from an HTTP requestconst players = [&nbsp; { name: "Chris", score: 20, winner: false },&nbsp; { name: "Anne", score: 22, winner: true },&nbsp; { name: "Taylor", score: 14, winner: false }];// You can loop through an array with `for...of`for(let player of players){&nbsp; // You can access a property of "player" with `player.whateverThePropIsCalled`&nbsp; addListItem(player.name);}// You can do whatever you want with the name, such as appending it to a listfunction addListItem(name){&nbsp; const textNode = document.createTextNode(name);&nbsp; const listItem = document.createElement("LI");&nbsp; listItem.appendChild(textNode);&nbsp; const list = document.getElementById("list");&nbsp; list.appendChild(listItem);}<ol id="list"></ol>

Answer 5

如果您使用的是普通脚本。你可以做这样的事情。var data = [{&nbsp; &nbsp; "launches": [&nbsp; &nbsp; {&nbsp; &nbsp; "id": 2036,&nbsp; &nbsp; "name": "Electron | Don't Stop Me Now",&nbsp; &nbsp; "windowstart": "June 11, 2020 04:43:00 UTC",&nbsp; &nbsp; "windowend": "June 11, 2020 06:32:00 UTC",&nbsp; &nbsp; }]&nbsp; &nbsp;}];&nbsp; &nbsp; var names = data.map(i=>i.name);&nbsp; &nbsp; names.forEach(i=>{&nbsp; &nbsp; &nbsp;var div = document.createElement('div');&nbsp; &nbsp; &nbsp;div.innerText = i;&nbsp; &nbsp; &nbsp;document.body.appendChild(div);&nbsp; &nbsp; })