如何仅使用javascript循环遍历json数据中的数组

Question

数据源（JSON）：

{
  "photographers": [{
      "name": "Mimi Keel",
      "id": 243,
      "city": "London",
      "country": "UK",
      "tags": ["portrait", "events", "travel", "animals"],
      "tagline": "Voir le beau dans le quotidien",
      "price": 400,
      "portrait": "MimiKeel.jpg"
    },
    {
      "name": "Ellie-Rose Wilkens",
      "id": 930,
      "city": "Paris",
      "country": "France",
      "tags": ["sports", "architecture"],
      "tagline": "Capturer des compositions complexes",
      "price": 250,
      "portrait": "EllieRoseWilkens.jpg"
    }
  ],

我正在尝试循环遍历第一个 photographers 条目中键 tags 中包含的数组，并在列表项中显示所有标签。

这是我目前得到的：

function fetchData() {
  fetch("sample json file.json")
    .then(response => response.json())
    .then(data => {
      console.log(data.photographers[0].tags[1])

      // looping throw tags of a photographer
      var output = "";

      for (var i = 0; i <= data.photographers[0].tags.length; i++) {
        for (keys in data.photographers[0].tags[i]) {
          console.log(data.photographers[0].tags[i])
          if (data.photographers[0].tags[i].hasOwnProperty(keys)) {
            output += '<li>' +
              '<a href="' + data.photographers[0].tags[i] +
              '">' + data.photographers[0].tags[i] + '</a>' +
              '</li>';
          }
        }
      }
      var update = document.getElementById('tags');

      update.innerHTML = output;
    })
}

fetchData();

我愿意接受任何建议或更正我的代码

Answer 1

您的循环可以变得非常简单。它有几个问题，例如您提到的一个，另一个是与多个摄影师打交道，而不仅仅是第一个（不确定这是否是您的实际用例）：

您的代码更改：删除您的内部 for 循环，因为这会重复所有内容：

for (var i = 0; i < data.photographers[0].tags.length; i++) {
  console.log(data.photographers[0].tags[i])
}

建议：

// same data given in the question
let data = { "photographers": [{ "name": "Mimi Keel","id": 243,"city": "London","country": "UK","tags": ["portrait", "events", "travel", "animals"],"tagline": "Voir le beau dans le quotidien","price": 400,"portrait": "MimiKeel.jpg" }, {"name": "Ellie-Rose Wilkens","id": 930,"city": "Paris","country": "France","tags": ["sports", "architecture"],"tagline": "Capturer des compositions complexes","price": 250,"portrait": "EllieRoseWilkens.jpg"  }]};

// All photographers
for (let photographer of data.photographers) {
  for (let tag of photographer.tags) {
    console.log(tag);
    // Here you get individual tag. Use it in your code like generating output.
  }
}

// Just the first photographer
for (let tag of data.photographers[0].tags) {
  console.log(tag);
  // Here you get individual tag. Use it in your code like generating output.
}