forEach
method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.
First, declare an html variable with var html = "";
.
Then, loop through the JSON, adding HTML to the variable that wraps the key names in strong
tags, followed by the value. When the loop is finished, you render it.
Here's the code that does this:
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
method to loop over the JSON data and create the HTML elements to display it.
Here is some example 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
variable
testString: 'assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g), ''Your code should store the data in the html
variable'');'
- text: Your code should use a forEach
method to loop over the JSON data from the 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: Your code should wrap the key names in strong
tags.
testString: 'assert(code.match(/.+<\/strong>/g), ''Your code should wrap the key names in strong
tags.'');'
```
```