JavaScriptのJSON応答をループする方法

このチュートリアルは、JavaScriptを使用してリモートサーバーから受信したJSONデータを効率的に解析する方法を示しています。 プロセスを2つのステップでカバーします。JSON文字列を使用可能なJavaScript構造（オブジェクトまたは配列）にデコードし、その構造を繰り返してデータにアクセスします。

とよりモダンなXMLHttpRequestAPIの両方で実用的な例を使用します。 fetch

重要な概念：

json（javascriptオブジェクト表記）：
1. Webアプリケーションで広く使用されている軽量のテキストベースのデータインターチェンジ形式。 JavaScriptオブジェクトのリテラル構文に触発されましたが、JSONはキーの周りに二重引用符を厳密に必要とします。 json parsing：
JSON文字列をJavaScriptオブジェクトまたは配列に変換するプロセス。 これは、サーバーがデータを文字列として送信するため、これは重要です。これは、使用する前に解析する必要があります。
2. iteration：解析後、JavaScriptの組み込みのメソッドを使用して、
、
3. 、、または配列メソッド（など）を使用して個々のデータ要素にアクセスします。解析された構造内 for...in Object.entriesObject.valuesJSONの理解：forEach

JSONデータは、2つの方法で構成できます

jsonオブジェクト：

名前/値ペアのコレクション（JavaScriptオブジェクトに似ています）。

jsonアレイ：

順序付けられた値のリスト（JavaScriptアレイに似ています）。
：
• でjsonをフェッチします 例として、
API（単純なジョークAPI）を使用しましょう。 このAPIは、

ヘッダーが

。 最初に、データを取得します：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]}`);
  }
}

• APIでJSONをフェッチします：Object.entries()
APIは、クリーンな約束ベースのアプローチを提供します：

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

応答本体をJSONとして解析し、解析されたデータで解決する約束を返します。 fetchJSONアレイの処理：

fetch github APIからリポジトリのリストを取得しましょう：

(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}`);
  });
})();

この例は、response.json()を使用してJSONアレイを介してイテレーションを示しています。 より複雑な操作には、

や

などの他の配列メソッドを使用できます。 結論：

このチュートリアルは、JavaScriptのJSON応答を介して解析と繰り返しの重要なステップを扱いました。生産環境で潜在的なエラー（ネットワークの問題、無効なJSONなど）を処理することを忘れないでください。 約束に基づいたアプローチを備えた

APIは、一般的に、よりクリーンな構文とより良いエラー処理機能に優先されます。

以上がJavaScriptのJSON応答をループする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。