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を使えば柔軟にデータ管理が行えるのでお勧めです。

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

Ads

関連記事

JavaScript プログラミング

複数設置に対応したタブ切り替えをjqueryで実装しよう

2020.10.20
281
WordPress プログラミング

カテゴリーページパーマリンクからcategoryを削除した際のページネーション不具合を修正

更新日:2021.10.26
86
JavaScript プログラミング

【簡単】JavaScriptを使って任意の文字列を置換する方法

2022.04.05
18
PHP プログラミング

【php】文字列を比較し、部分一致で条件分岐する方法

2021.12.24
178