如何通過JavaScript中的JSON響應循環

本教程演示瞭如何使用JavaScript從遠程服務器收到的有效解析JSON數據。 我們將分兩個步驟介紹該過程：將JSON字符串解碼為可用的JavaScript結構（對像或數組），然後遍歷該結構以訪問數據。 我們將使用XMLHttpRequest和更現代的fetchapi的實踐示例。

密鑰概念：

1. JSON（JavaScript對象符號）：一種基於文本的數據交換格式，廣泛用於Web應用程序中。 雖然受JavaScript對象字面語法的啟發，但JSON嚴格需要圍繞鍵的雙引號。
JSON解析：將JSON字符串轉換為JavaScript對像或數組的過程。 這是至關重要的，因為服務器將數據作為字符串發送，需要在使用之前對其進行解析。
2. > 迭代：在解析後，我們使用JavaScript的內置方法，例如
>，
3. ，，或數組方法（等）來訪問單個數據元素在解析結構中。 for...in Object.entries Object.valuesforEach理解JSON：

JSON數據可以通過兩種方式構造：>

> json對象：

>名稱/值對的集合（類似於JavaScript對象）。

JSON數組：
• 值的有序列表（類似於JavaScript數組）。
• >用 fetching json：
>

>

>讓我們以api（一個簡單的笑話API）為例。 此API返回JSON數據時，將標題設置為XMLHttpRequest>。 >。

首先，我們獲取數據：>

icanhazdadjoke響應是字符串。 我們使用Accept：application/json對其進行解析。

>現在，我們可以迭代對象的屬性。 以下是幾種方法：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(typeof xhr.responseText); // Output: string
    console.log(xhr.responseText);       // Output: JSON string
  }
};
xhr.open('GET', 'https://icanhazdadjoke.com/', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);

JSON.parse()

循環：

if (xhr.readyState === XMLHttpRequest.DONE) {
  const response = JSON.parse(xhr.responseText);
  console.log(response); // Output: Parsed JavaScript object
}

• for...in ：
一種更現代，更簡潔的方法：

for (const key in response) {
  if (response.hasOwnProperty(key)) {
    console.log(`${key}: ${response[key]}`);
  }
}

• >用Object.entries()api：
API提供了一種更清潔的，有前途的方法：>

Object.entries(response).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

解析響應主體作為JSON，並返回通過解析數據解決的諾言。 fetch

>處理JSON數組：>

>讓我們從GitHub API中獲取一個存儲庫列表：> fetch

此示例使用

(async () => {
  const response = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  const jsonData = await response.json();
  Object.entries(jsonData).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
})();

通過JSON數組演示。 您可以使用其他數組方法（例如

>或response.json()）進行更複雜的操作。

>

結論：

該教程涵蓋了使用JavaScript中的JSON響應進行解析和迭代的基本步驟，同時使用XMLHttpRequest和fetch> api。請記住在生產環境中處理潛在錯誤（例如，網絡問題，無效的JSON）。 具有基於承諾的方法的API通常是其清潔語法和更好的錯誤處理功能的首選。

以上是如何通過JavaScript中的JSON響應循環的詳細內容。更多資訊請關注PHP中文網其他相關文章！