JavaScript、jQuery、JSONを用いたローカルJSONファイルの読み込み

2024-04-02

JavaScript、jQuery、JSONを用いたローカルJSONファイルの読み込み

必要なもの

テキストエディタ
ウェブブラウザ

手順

JSONファイルの準備

まず、読み込みたいデータをJSON形式で記述したファイルを用意します。

{
  "name": "John Doe",
  "age": 30,
  "city": "Tokyo"
}

上記は、名前、年齢、都市の情報を含むシンプルなJSONファイルです。ファイル名は data.json として保存します。

HTMLファイルの作成

次に、HTMLファイルを作成し、以下のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ローカルJSONファイルの読み込み</title>
</head>
<body>
  <h1>データ</h1>
  <ul id="data-list"></ul>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

このコードは、<h1>タグとulタグで構成されています。ulタグは、JSONデータから読み込んだ情報を表示するために使用されます。

JavaScriptファイルの作成

$(document).ready(function() {
  // ローカルJSONファイルを読み込む
  $.getJSON("data.json", function(data) {
    // JSONデータの処理
    $.each(data, function(key, value) {
      // リストに項目を追加
      $("#data-list").append("<li>" + key + ": " + value + "</li>");
    });
  });
});

このコードは、以下の処理を行います。

$.getJSON() メソッドを使用して、data.json ファイルを読み込みます。
ファイル読み込みが成功すると、data 変数にJSONデータが格納されます。
$.each() メソッドを使用して、data 変数内のオブジェクトをループ処理します。
ループ処理の中で、オブジェクトのキーと値を取得し、リストに項目を追加します。

実行と確認

HTMLファイルとJavaScriptファイルを保存し、ブラウザで開きます。

ブラウザに上記のような結果が表示されれば、ローカルJSONファイルの読み込みに成功しています。

補足

上記のコードは、jQueryを使用してJSONファイルを読み込んでいます。jQueryを使用せずに読み込む場合は、XMLHttpRequest オブジェクトを使用する必要があります。
JSONファイルの読み込みが失敗した場合、エラー処理を行う必要があります。

以上、JavaScript、jQuery、JSONを用いたローカルJSONファイルの読み込みについて解説しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ローカルJSONファイルの読み込み</title>
</head>
<body>
  <h1>データ</h1>
  <ul id="data-list"></ul>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

$(document).ready(function() {
  // ローカルJSONファイルを読み込む
  $.getJSON("data.json", function(data) {
    // JSONデータの処理
    $.each(data, function(key, value) {
      // リストに項目を追加
      $("#data-list").append("<li>" + key + ": " + value + "</li>");
    });
  });
});

{
  "name": "John Doe",
  "age": 30,
  "city": "Tokyo"
}

実行方法

上記のコードをHTMLファイルとJavaScriptファイルに保存します。
HTMLファイルをブラウザで開きます。

結果

<h1>データ</h1>
<ul id="data-list">
  <li>name: John Doe</li>
  <li>age: 30</li>
  <li>city: Tokyo</li>
</ul>

以上、サンプルコードの紹介でした。

ローカルJSONファイルを読み込むその他の方法

XMLHttpRequest オブジェクトを使う

jQueryを使用せずに、JavaScriptの XMLHttpRequest オブジェクトを使用してJSONファイルを読み込むことができます。

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onload = function() {
  if (xhr.status === 200) {
    // JSONデータの処理
    var data = JSON.parse(xhr.responseText);
    // ...
  } else {
    // エラー処理
  }
};
xhr.send();

Fetch APIを使う

JavaScriptの Fetch APIを使用して、ローカルJSONファイルを読み込むこともできます。

fetch("data.json")
  .then(function(response) {
    if (response.ok) {
      // JSONデータの処理
      return response.json();
    } else {
      // エラー処理
    }
  })
  .then(function(data) {
    // ...
  });

var fs = require("fs");

fs.readFile("data.json", "utf-8", function(err, data) {
  if (err) {
    // エラー処理
  } else {
    // JSONデータの処理
    var data = JSON.parse(data);
    // ...
  }
});