Convert JSON Data to HTML

[zilongxuan001]

介绍

现在我们从JSON API里获得数据，在HTML里展现出来。

我们可以用.forEach()方法获得（loop）数据，并修改HTML元素。

方法

首先，声明html 变量var html = "";

然后，去loop JSON，增加更多的HTML元素到那个变量，当循环（loop）结束，我们在render它。

下面是代码

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

代码

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
        json.forEach(function(val){
          var keys=Object.keys(val);
          html +="<div calss = 'cat'>";
          keys.forEach(function(key){
          html +="<strong>" + key+"</strong>:"+val[key]+"br";            
          })
          html +="</div><br>";          
        })

        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

结果显示

点击按钮后，结果为

来源

https://www.freecodecamp.org/challenges/convert-json-data-to-html

[zilongxuan001]

20170402

分析如下

id:0 br imageLink:https://s3.amazonaws.com/freecodecamp/funny-cat.jpg br altText:A white cat wearing a green helmet shaped melon on it's head. br codeNames:Juggernaut,Mrs. Wallace,Buttercupbr

id:1 br imageLink:https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg br altText:A white cat with blue eys, looking very grumpy. br codeNames:Oscar,Scrooge,Tyrionbr

id:2 br imageLink:https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg br altText:A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. br codeNames:The Doctor,Loki,Jokerbr

[zilongxuan001]

解析 （1）声明变量html var html=""

（2）使用.forEach()函数。 html加上<div class='cat'>

然后loop每一个JSON元素。

<strong> id01 </strong> 0 br
<strong>imageLink</strong>:https://s3.amazonaws.com/freecodecamp/funny-cat.jpg br
<strong>altText</strong>:A white cat wearing a green helmet shaped melon on it's head. br
<strong>codeNames</strong>:Juggernaut,Mrs. Wallace,Buttercup br

同样对id：01 和 id：02

html末尾加上 </div><br>

（3）使用变量html

$(".message").html(html);

参考 Array.prototype.forEach()

请详细帮忙解释下这几句有关JSON的代码是什么意思