Fuente de datos (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" } ], Estoy tratando de recorrer la matriz contenida en las tags clave en la primera entrada de los photographers y mostrar todas las etiquetas en un elemento de la lista.
Esto es lo que tengo hasta ahora:
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();Estoy abierto a cualquier sugerencia o corrección de mi código.
Su ciclo se puede hacer realmente simple. Tiene un par de problemas como el que mencionaste, y otro trata con varios fotógrafos y no solo con el primero (no estoy seguro si este es tu caso de uso real):
Su cambio de código: elimine su bucle for interno ya que eso es lo que duplica todo:
for (var i = 0; i < data.photographers[0].tags.length; i++) { console.log(data.photographers[0].tags[i]) }Sugerencia:
// 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. }