FCC - JSON APIs and Ajax

之前所有的HTML和CSS的内容都是静态的页面，所有的内容部分都需要前端人员在写网页的时候填写好，比如我们之前做的portfolio和tribute page。这岂不是超级麻烦的！要知道我们一个html写出来的页面可以特别长，一层套一层的div，所以人为去修改很费力，而且容易出错。接下来要学习的内容就是如何让我们的内容是自动填充到html当中去。We’ll learn how to update HTML with the data we get from these APIs using a technology called Ajax.

1. 复习一下在jQuery的学习笔记中提到过的，$(document).ready()函数，它实在页面加载完成后运行一次。
2. Adding a “click on” function on the getMessage button to change the text in message class element into ready function.

<script>
  $(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
      $(".message").text("Here is the message");
      // Only change code above this line.
    });
  });
</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>

1. 接下来正式开始简单的json api介绍，首先$.getJSON(), Load JSON-encoded data from the server using a GET HTTP request. 这个函数有三个可填的参数，第二个可选的是一个回调函数类型的参数，这个回调函数会在json从服务器上成功下载之后运行。回调参数中的第一个参数就是已经解析好的json文件。例子：
   首先我们的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"
    ]
  }
]

那么这个回调函数首先通过数组的forEach函数将json中的数组遍历，在每一个数组元素的遍历中，又利用jQuery的.each函数将这个数组元素，实际上是一个object的每一个键值对遍历，输出到html这个最开始定义好的变量当中。当所有遍历完成后就将html的内容写到.message的这个div当中。

<script>
  $(document).ready(function() {
    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {
        var html = "";
        json.forEach(function(val) {
          html += "<div class = 'cat'>";
          $.each( val, function( key, val ) {
            html += "<strong>" + key + "</strong>: " + val + "<br>";
          });
          html += "</div><br>";
        });
        $(".message").html(html);
      });
    });
  });
</script>

下面这个的功能稍有不同，它在遍历每一个数组元素的时候只关心这个元素当中的imageLink和altText这两个键值对，所以它没有用.each去遍历所有元素的键值对，而是直接用val[“imageLink”]这种方式直接访问这个object。

<script>
  $(document).ready(function() {
    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {
        var html = "";
        json.forEach(function(val) {
          html += "<div class = 'cat'>";
          html += "<img src = '" + val["imageLink"] + "' alt = " + val["altText"] + "'>";
          html += "</div>";
        });
        $(".message").html(html);
      });
    });
  });
</script>