How to Convert JSON Data into HTML

Question

I came across an exercise in freeCodeCamp to convert json data to html. Here, I was asked to copy paste a jquery which I didn't understand.

 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>"; });

This is my json

 [ { "id":0, "imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg", "altText":"A white cat wearing a green helmet shaped melon on it's head. ", "codeNames":[ "Juggernaut", "Mrs. Wallace", "Buttercup" ] }, { "id":1, "imageLink":"https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg", "altText":"A white cat with blue eys, looking very grumpy. ", "codeNames":[ "Oscar", "Scrooge", "Tyrion" ] }, { "id":2, "imageLink":"https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg", "altText":"A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ", "codeNames":[ "The Doctor", "Loki", "Joker" ] } ]

Can anyone help me to break down this code and tell what each line in the code does? For example I don't know what Object.keys does. Is Object an inbuilt instance?

Answer 1

The Object.keys() method returns an array of a given object's own enumerable properties.

var keys = Object.keys(val);

Here 'keys' is the array form of your json. According to the JSON you provided the array has 3 objects.

You can also write

Object.keys(val).forEach(function(key){
  //something
});

instead of

var keys = Object.keys(val);

keys.forEach(function(key) {
     //something
  });

Inside the loop the key returns the the key of your object ie id , imageLink etc and val[key] return corresponding values eg 0 , "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg" to be more specific.

Answer 2

From MDN

Object.keys() returns an array whose elements are strings corresponding to the enumerable properties found directly upon object. The ordering of the properties is the same as that given by looping over the properties of the object manually.

The purpose of the code is to generate html by using key and corresponding value .

 var json = [ { "id":0, "imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg", "altText":"A white cat wearing a green helmet shaped melon on it's head. ", "codeNames":[ "Juggernaut", "Mrs. Wallace", "Buttercup" ] }, { "id":1, "imageLink":"https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg", "altText":"A white cat with blue eys, looking very grumpy. ", "codeNames":[ "Oscar", "Scrooge", "Tyrion" ] }, { "id":2, "imageLink":"https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg", "altText":"A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ", "codeNames":[ "The Doctor", "Loki", "Joker" ] } ] var html = ""; //iterating through all the item one by one. json.forEach(function(val) { //getting all the keys in val (current array item) var keys = Object.keys(val); //assigning HTML string to the variable html html += "<div class = 'cat'>"; //iterating through all the keys presented in val (current array item) keys.forEach(function(key) { //appending more HTML string with key and value aginst that key; html += "<strong>" + key + "</strong>: " + val[key] + "<br>"; }); //final HTML sting is appending to close the DIV element. html += "</div><br>"; }); document.body.innerHTML = html;