javascript - How to Convert JSON Data into HTML - Stack Overflow

admin管理员组

文章数量:1409391

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

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./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./freecodecamp/grumpy-cat.jpg",
      "altText":"A white cat with blue eys, looking very grumpy. ",
      "codeNames":[  
         "Oscar",
         "Scrooge",
         "Tyrion"
      ]
   },
   {  
      "id":2,
      "imageLink":"https://s3.amazonaws./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?

• javascript
• jquery
• html
• json

Share Improve this question Follow edited Mar 5, 2020 at 7:13 Gaurav Thantry asked Jan 6, 2018 at 5:33 Gaurav ThantryGaurav Thantry 8031616 silver badges3838 bronze badges 1

• You can keep original table format, try github./arters/Convert-json-data-to-a-html-template – kkasp Commented Mar 4, 2020 at 6:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 i.e. id, imageLink etc and val[key] return corresponding values e.g. 0, "https://s3.amazonaws./freecodecamp/funny-cat.jpg" to be more specific.

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./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./freecodecamp/grumpy-cat.jpg",
      "altText":"A white cat with blue eys, looking very grumpy. ",
      "codeNames":[  
         "Oscar",
         "Scrooge",
         "Tyrion"
      ]
   },
   {  
      "id":2,
      "imageLink":"https://s3.amazonaws./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;

本文标签： javascriptHow to Convert JSON Data into HTMLStack Overflow