JavaScript中迴圈遍歷JSON響應！

      我們在前端開發過程中，透過伺服器獲取資料的時候伺服器返回的資料通常為JSON格式，今天小千就來教大家如何利用JavaScript解析伺服器的響應獲取我們想要的資料。

      該過程通常包括兩個步驟：將資料解碼為本機結構（例如陣列或物件），然後使用JavaScript的內建方法遍歷該資料結構。

      從遠端API獲取介面

      1. 使用XMLHttpRequest API

      返回的資料為：

      // string

      // {"id":"helloworld","joke":"today is Friday!","status":200}

      伺服器返回了一個字串。我們需要先將其解析為JavaScript物件，然後才能遍歷其屬性。我們可以使用JSON.parse()做到這一點,如下顯示：

      2. 使用Fetch API

      儘管上面使用XMLHttpRequest物件的方法效果很好，但在複雜的場景下它就會變得非常笨拙。下面我們使用瀏覽器新提供的api,它是window物件上定義的方法fetch，你可以使用該方法執行請求。此方法返回一個Promise，可用於檢索請求的響應。

      Fetch API返回響應流。這不是JSON，因此JSON.parse()需要嘗試使用它的response.json()函式而不是對其進行呼叫。這將返回一個Promise，該Promise會將響應的正文文字解析為JSON的結果進行解析。

      多種方式遍歷資料

      1. 使用for...in

      2. 使用Object.entries，Object.values或Object.entries

      3. 處理陣列

      值的有序列表（也稱為陣列）也是有效的JSON，讓我們研究如何處理此類響應。

      對於這個示例，我們將使用GitHub的REST API來獲取使用者儲存庫的列表：

      如您所見，API返回了一個物件陣列。要訪問每個單獨的物件，我們可以使用常規forEach方法：

      另外，您當然可以使用上面討論的任何方法來遍歷物件的所有屬性，並將它們記錄到控制檯：

      結論

      在這篇文章中，我們研究了什麼是JSON。我已經演示瞭如何將伺服器的JSON響應解析為本機資料結構（例如陣列或物件），以及如何遍歷這種結構以訪問其中包含的資料。我們大部分web服務與伺服器的互動都是圍繞這個這個展開，希望這篇文章對您有所幫助