how to loop trough arrays in json data using only javscript-CodePudding

Data source (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"
    }
  ],

I am trying to loop trough the array contained in the key tags in the first photographers entry and display the all tags in a list item.

Heres what i got so far:

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();

I am open to any suggestion or correction of my code

CodePudding user response：

Your loop can be made really simple. It has a couple of issues such as the one you mentioned, and another is dealing with multiple photographers and not just the first (Not sure if this is your actual use case):

Your code change: Remove your inner for loop as that's what duplicates everything:

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

Suggestion:

// 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.
}