JavaScript を使用してローカル JSON ファイルからデータを読み取るにはどうすればよいですか?

JavaScript での外部ローカル JSON ファイルの読み取り

JavaScript で外部ローカル JSON ファイルのデータにアクセスするには、次の手順に従います。

JSON の作成ファイル:

• JSON データをローカル ファイル (例:次の内容の test.json) に保存します:

{
  "resource": "A",
  "literals": ["B", "C", "D"]
}

JavaScript コード:

JSON ファイルが作成されたら、それを読み取る JavaScript スクリプトを作成します。 it:

// Step 1: Get JSON file path
const filePath = "/Users/Documents/workspace/test.json";

// Step 2: Create XMLHttpRequest object
const xhr = new XMLHttpRequest();

// Step 3: Open and send request
xhr.open("GET", filePath);
xhr.send();

// Step 4: Handle response
xhr.onload = function() {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);

    // Step 5: Access JSON data
    console.log(response.resource); // Output: "A"
    console.log(response.literals); // Output: ["B", "C", "D"]
  } else {
    console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
  }
};

使用例:

このコードを使用するには、test.json ファイルと JavaScript スクリプトの両方を HTML ドキュメントに含めます:

<script src="/Users/Documents/workspace/test.json"></script>
<script src="script.js"></script>

このコードは、JSON ファイルへの非同期 HTTP GET リクエストを確立し、応答を取得して解析します。 JSON として保存し、関連するデータをコンソールに出力します。

以上がJavaScript を使用してローカル JSON ファイルからデータを読み取るにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。