FCC-JS-JQ-Convert JSON Data to H

这里，我们使用.forEach()函数来循环遍历JSON数据写到htmll变量中。
首先我们定义一个HTML变量，

var html = ""; 。

然后，我们使用.forEach()函数来循环遍历JSON数据写到html变量中，最后把html变量显示到我们的页面中。
整个过程的代码如下：

json.forEach(function(val) {

var keys = Object.keys(val);

html += "<div class = 'cat'>";

keys.forEach(function(key) {

html += "<b>" + key + "</b>: " + val[key] + "
";

});

html += "</div>
";

});

提示：示例中难点在于两个forEach循环，而且里面夹杂有字符串拼接，这是最头疼也最容易出错的地方。
示例:

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

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

        var html = "";
        // 请把你的代码写在这条注释以下
        json.forEach(function(val){
          var keys = Object.keys(val);
          console.log(keys);
          html += "<div class='cat'>";
          keys.forEach(function(key){
            html += "<b>" + key + "</b>:"
          })
          html += "</div>
";
        });
        
        
        // 请把你的代码写在这条注释以上

        $(".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>