forEach
para recorrer en bucle los datos, ya que los objetos de la foto del gato se mantienen en una matriz. A medida que llegas a cada elemento, puedes modificar los elementos HTML.
Primero, declare una variable html con var html = "";
.
Luego, recorra el JSON, agregando HTML a la variable que envuelve los nombres de las claves en etiquetas strong
, seguido del valor. Cuando el bucle termina, lo renderizas.
Aquí está el código que hace esto:
json.forEach(function(val) { var keys = Object.keys(val); html += "<div class = 'cat'>"; keys.forEach(function(key) { html += "<strong>" + key + "</strong>: " + val[key] + "<br>"; }); html += "</div><br>";});
forEach
para recorrer en bucle los datos JSON y cree los elementos HTML para mostrarlos.
Aquí hay un ejemplo JSON
[ { "id":0, "imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg", "altText":"A white cat wearing a green helmet shaped melon on its head. ", "codeNames":[ "Juggernaut", "Mrs. Wallace", "Buttercup" ] }]
html
testString: 'assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g), "Your code should store the data in the html
variable");'
- text: Su código debe utilizar un método forEach
para recorrer en bucle los datos JSON de la API.
testString: 'assert(code.match(/json\.forEach/g), "Your code should use a forEach
method to loop over the JSON data from the API.");'
- text: Su código debe envolver los nombres de las claves en etiquetas strong
.
testString: 'assert(code.match(/.+<\/strong>/g), "Your code should wrap the key names in strong
tags.");'
```
```