如何将JSON数据转换为HTML

Question

我在freeCodeCamp上遇到了一个练习，要将json数据转换为html。这里，我被要求复制粘贴一个我不理解的jquery代码。

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

这是我的 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"
      ]
   }
]

有没有人能帮我分解这段代码并告诉我每行代码的作用？例如，我不知道Object.keys是什么意思。Object是内置实例吗？

- Gaurav Thantry

---

你可以保留原始表格格式，尝试使用 https://github.com/arters/Convert-json-data-to-a-html-template。 - kkasp

Answer 1

Object.keys() 方法返回一个给定对象的可枚举属性组成的数组。

var keys = Object.keys(val);

在这里，“keys”是您的json数组形式。根据您提供的JSON，该数组有3个对象。

您还可以写成：

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

替代

var keys = Object.keys(val);

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

循环体内的 key 返回你对象的键，例如id、imageLink等等，而val[key] 返回相应的值，例如0、"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg" 等等。

- Hq Shiblu

---

感谢 @Hq Shiblu 的快速回复。这正是我想要的，而且非常精确。唯一让我不明白的是 html += "<div class = 'cat'>"; 这是做什么的？class='cat' 是在哪里定义的？ - Gaurav Thantry

供您参考，html 在脚本开头已定义，这里我没有粘贴出来。 - Gaurav Thantry

“cat”类是用于某些CSS或JavaScript的，我没有看到它的任何用途。 它可以在CSS或jQuery中用作选择器。 它不是JavaScript类，因此不需要在其他地方声明。 - Hq Shiblu

谢谢@Hq Shiblu。终于我能理解了。感谢您的时间。 :) - Gaurav Thantry

Answer 2

来自MDN

Object.keys()返回一个数组，其元素是与对象上直接找到的可枚举属性对应的字符串。属性的顺序与手动循环对象属性时给出的顺序相同。

代码的目的是使用key和相应的value生成html。

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;

- Mamun