Written by Kasumi

jQueryを使ってJSONデータを取得、配列にして値を出力する方法【Ajaxで解決!】

web上でのデータやり取りに便利なJSON。

JSONファイルを配列で取得し、webブラウザ上で値を出力したい。

本記事ではjQueryの$.ajax()メソッドを使ってこのような疑問を解決します。

JSONファイルを用意

[
    {
        "name": "佐藤",
        "school_year": 1,
        "test": {
            "japanese": 30,
            "english": 60
        }
    },
    {
        "name": "鈴木",
        "school_year": 2,
        "test": {
            "japanese": 40,
            "english": 70
        }
    },
    {
        "name": "田中",
        "school_year": 3,
        "test": {
            "japanese": 50,
            "english": 80
        }
    }
]

本記事では例として上記のようなJSONデータ形式の値を取得します。

name値に名前
school_year値に学年
test値にテストの点数

web上の出力にはコンソール画面にオブジェクトの数だけ以下のように読み込まれるを想定します。

私の名前は【name】です。
学年は【school_year】年です。
国語の点数は【test:japanese】点です。
英語の点数は【test:english】点です。

JSONデータを読み込むjQueryコード

      $(function () {
        var data = []; // data配列を定義
        $.ajax({
          // ajax読み込みの設定
          type: "GET",
          url: "http://json.localhost/data.json", // jsonまでのファイルパス
          dataType: "json", // ファイル形式
          async: false, // 非同期通信フラグ
        }).then(
          function (json) {
            for (var i = 0; i < json.length; i++) {
              // json値をdata配列に追加
              data.push({
                name: json[i].name,
                school_year: json[i].school_year,
                test: json[i].test,
              });
            }
            console.log(data);
            for (var i = 0; i < data.length; i++) {
              // data配列の値を出力
              console.log("私の名前は" + data[i]["name"] + "です。");
              console.log("学年は" + data[i]["school_year"] + "年です。");
              console.log(
                "国語の点数は" + data[i]["test"]["japanese"] + "点です。"
              );
              console.log(
                "英語の点数は" + data[i]["test"]["english"] + "点です。"
              );
            }
            // jsonの読み込みに成功
            console.log("読み込みに成功しました");
          },
          function () {
            // jsonの読み込みに失敗
            console.log("読み込みに失敗しました");
          }
        );
      });

JSONファイルを読み込むjQueryコード例です。

JSONファイルを取得するには$.ajax()メソッドを使います。

メソッド内のurlパラメータにJSONファイルまでのパスを記述します。

JSONデータ値を格納するdata配列を定義します。

for文とpush()メソッドを使ってdata配列にJSONファイルデータを項目事に格納してます。

push()メソッド内のコード例を参考に、任意のJSONデータから値を格納しましょう。

最後にdata配列をfor文で回せばJSONデータのオブジェクト数だけ値が出力されます。

上記コード・JSONデータを使うと下記のようにコンソールで出力されます。

以上の流れで解決です。

まとめ

JSONを使えば柔軟にデータ管理が行えるのでお勧めです。

以上で解説を終わります。

目次

関連記事

jQuery

【簡単datapicker】選択した日付によってイベントをjQueryで追加する方法

更新日:2022.09.09
1551
jQuery

jQueryを使って、金額を三桁でカンマ区切りする方法

更新日:2022.09.09
2301
jQuery

【簡単】jQueryのDatepickerに時間設定を追加したDatetimepickerを導入する方法

更新日:2022.09.09
2951
jQuery

【簡単】jQueryプラグインのlightboxを使って、画像モーダルウィンドウを実装しよう。

更新日:2022.09.09
2004