循环遍历 API JSON 文件中的元素答案

【问题标题】：loop trough elements in API JSON file循环遍历 API JSON 文件中的元素
【发布时间】：2020-06-07 06:10:33
【问题描述】：

我正在尝试从我的 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",
},
{},
{},
{},
{},
{},
{},
{},
{},

【问题讨论】：

这能回答你的问题吗？ For-each over an array in JavaScript

标签： javascript jquery json

【解决方案1】：

您可以尝试一个简单的 for 循环或 forEach 循环...

  // json data

  let data = {
    "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",
        },
        {
            "id": 2037,
            "name": "Don't Stop Me Now",
            "windowstart": "June 11, 2020 04:43:00 UTC",
            "windowend": "June 11, 2020 06:32:00 UTC",
        }
    ]
};

// function for handling data manipulation 
function printNames() {
    let parsed = '';// temp variable for storing it as string
    for (i = 0; i < data.launches.length; i++) { //iterate through each array item to fin require info
        parsed += data.launches[i].id + ' ' + data.launches[i].name + "\n";
    }
    console.log(parsed)
    let elem = document.getElementById('container');
    elem.innerHTML = parsed; //Append it to container
}
printNames();

【讨论】：

嘿！谢谢，但我无法在 for 循环的每次迭代后创建一个新行
尝试在循环中给出
而不是 \n
@AgussMasco 或者您可以将 elem.innerHTML 更改为 innerText ，它会正常工作...如果您发现答案有用，请点赞:)

【解决方案2】：

这是您可以循环遍历对象数组并打印对象的特定值的方法

jsonObj.launches.forEach(item => console.log(item.name))

【讨论】：

我怎样才能代替 console.log，在 html 文档中显示名称？

【解决方案3】：

如果您使用的是纯 Javascript。你可以这样做。

var data = [{
    "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",
    }]
   }];

    var names = data.map(i=>i.name);

    names.forEach(i=>{
     var div = document.createElement('div');
     div.innerText = i;
     document.body.appendChild(div);
    })

【讨论】：

【解决方案4】：

var my_object = {
    "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",
    }]};

for(var i=0; i<my_object.launches.length;i++){
    console.log(my_object.launches[i].name);
}

【讨论】：

【解决方案5】：

这是执行您建议的简单方法。
（我不确定您所说的“在 HTML 中打印 ...”是什么意思，所以我只是将每个 name 字符串添加到 HTML 代码中的现有列表中。）

// An array that might be a JSON response from an HTTP request
const players = [
  { name: "Chris", score: 20, winner: false },
  { name: "Anne", score: 22, winner: true },
  { name: "Taylor", score: 14, winner: false }
];

// You can loop through an array with `for...of`
for(let player of players){

  // You can access a property of "player" with `player.whateverThePropIsCalled`
  addListItem(player.name);
}

// You can do whatever you want with the name, such as appending it to a list
function addListItem(name){
  const textNode = document.createTextNode(name);
  const listItem = document.createElement("LI");
  listItem.appendChild(textNode);

  const list = document.getElementById("list");
  list.appendChild(listItem);
}

&lt;ol id="list"&gt;&lt;/ol&gt;

【讨论】：

【解决方案6】：

你可以的

launches.map((item,index)=>{
return <h3 key={index}>{item.name}</h3>
})

它将遍历数组的所有值并打印您想要的值。

【讨论】：