Skip to content

Challenge Convert JSON Data to HTML

SaintPeter edited this page · 1 revision
Clone this wiki locally

Convert JSON Data to HTML

Once you know how to get data from the JSON call then is time to learn how to iterate through it. We can use the .map() method to loop through our data and modify our HTML elements.

Here is a code that does that:

// calling map on the json variable and using a custom callback function.
json.map(function(val) {

  // Adding each object keys
  var keys = Object.keys(val);
  // Generating new html
  html += "<div class = 'cat'>";
  // Adding the custom html to each key
  keys.map(function(key) {

    html += "<b>" + key + "</b>: " + val[key] + "<br>";

  });

  html += "</div><br>";

});
Something went wrong with that request. Please try again.