當你需要根據服務器返回的數據來動態改變頁面的時候，應用程序接口(API)就派上用場了。

記住，API——應用程序接口(Application Programming Interface)是計算機之間相互交流溝通的工具。

許多網站的應用程序接口(API)都是通過一種稱為JSON格式的數據來傳輸的，JSON 是 JavaScript Object Notation的簡寫。

其實如果你曾經創建過JS對象的話，你就已經使用了這種數據格式，JSON是一種非常簡潔的數據格式。

它通常表現為了兩種形式，一種為單個對象，一種為多個對象

單個對象類似於：
{name:‘蓋倫‘,advantage:‘單挑無敵‘}

多個對象類似於：
[{name:‘蓋倫‘,advantage:‘單挑無敵‘},{name:‘諾克‘,advantage:‘上單霸主‘}]

每個對象屬性和屬性值的組合就是我們經常聽到的"鍵值對(key-value pairs)"。

讓我們從之前的貓圖API拿取數據吧。

你應該在你的點擊事件中加入如下的代碼：

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

    $("#getMessage").on("click", function(){
      // 請把你的代碼寫在這條註釋以下
     $.getJSON("/json/cats.json", function(json) {
  $(".message").html(JSON.stringify(json));
});
     // 在這之後，點擊"Get Message"按鈕。你的Ajax函數將把文字"The message will go here"替換成此從FreeCodeCam的貓圖API中獲得的原始JSON數據。
      
 
// 請把你的代碼寫在這條註釋以上
    });

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

我們已經從JSON API中獲得了數據，現在把它們展現到我們的HTML頁面中吧。

這裏，我們使用.forEach()函數來循環遍歷JSON數據寫到htmll變量中。

首先我們定義一個HTML變量，
var html = ""; 。

然後，我們使用.forEach()函數來循環遍歷JSON數據寫到html變量中，最後把html變量顯示到我們的頁面中。

整個過程的代碼如下：

$.getJSON("/json/cats.json", function(json) {

        var html = "";
        // 請把你的代碼寫在這條註釋以下
        json.forEach(function(val){
          var keys = Object.keys(val);
          html += "<div class = ‘cat‘>";
          keys.forEach(function(key){
            html +="<b> + key + </b>:" + val[key] + "<br>"
          });
          html += "</div><br>";
        });
        
        
        // 請把你的代碼寫在這條註釋以上

提示：示例中難點在於兩個forEach循環，而且裏面夾雜有字符串拼接，這是最頭疼也最容易出錯的地方

Get JSON with the jQuery getJSON Method