javascript - 如何将 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 是内置实例吗？

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” 更具体。