Question

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

＆＃13;

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

＆＃13;

这是我的json

＆＃13;

[  
   {  
      "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"
      ]
   }
]

＆＃13;

可以帮助我分解这段代码并告诉代码中的每一行吗？例如，我不知道Object.keys的作用。对象是内置实例吗？

Answer 1

Object.keys（）方法返回给定对象自己的可枚举属性的数组。

var keys = Object.keys(val);

此处＆＃39;键＆＃39;是你的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"更具体。

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;

如何将JSON数据转换为HTML

2 个答案: