【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)

nyan2222 — Tue, 30 Jun 2020 09:00:00 +0000

こんにちは。前回はJSONデータの基本操作方法を紹介しました。
詳しくは、こちらからご覧ください。

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。今回はJSONデータの扱い方の続編となります。宜しければご覧ください。操作するデータこちらが今回サンプルのデータです。json_...

今回はJQueryを使用したJSONファイルの読み込み方になります。
コピペでも実装可能なので、宜しければご覧ください。

フォルダ構成
JSONファイルの用意
JSONファイルの読み込み
1. $.ajax()
2. $.getJSON()
読み込みに失敗する場合
まとめ

フォルダ構成

今回使用するファイルのフォルダ構成はこちらです。

フォルダ構成
│
├─index.html
│    htmlファイル
├─script.js
│    javascript(JQuery)ファイル
└─data.json
     jsonファイル

JSONファイルの用意

まずは読み込むJSONファイルを準備します。
ファイルの場所は、ローカルファイルではセキュリティの問題で絶対パスで設定できないため、相対パスで簡単に設定できる場所に配置してください。

絶対パス：C:\Users\Guest\AppData…やhttps://nyanblog2222.comなどルートディレクトリからやURLなど、目的地までの経路を頭から最後まで記述

相対パス：../javascript/script.js など、現在地から目的地までの経路を記述

こちらがファイルの内容です。

ファイル：data.json

[
    {
        "name": "yamada",
        "school_year": 2,
        "test": {
            "japanese": 65,
            "english": 80
        }
    },
    {
        "name": "hayashi",
        "school_year": 2,
        "test": {
            "japanese": 45,
            "english": 95
        }
    },
    {
        "name": "sato",
        "school_year": 1,
        "test": {
            "japanese": 75,
            "english": 35
        }
    }
]

JSONファイルの読み込み

$.ajax()

$.ajax()での読み込み方法です。

$.ajax({
    // 読み込みの設定
    type: "GET",
    url: "data.json", // ファイルパス（相対パス）
    dataType: "json", // ファイル形式
    async: false // 非同期通信フラグ
}).then(
    function (json) {
        // 読み込み成功時の処理
        console.log("読み込みに成功しました");
        console.log(json)
        json.forEach(function (data) {
            console.log(data)
        });
    },
    function () {
        // 読み込み失敗時の処理
        console.log("読み込みに失敗しました");
    }
);

読み込みの設定

1～6行目でjsonを読み込む際の設定を記述しています。
ファイル名やファイルの配置を変更する場合、4行目の”data.json”を変更してください。
また、6行目のasyncでは、非同期通信フラグを設定しています。
デフォルトではtrueですがfalseに設定すると、読み込みが終わるまで他の処理を進めることができません。逆に読み込みが終わってる次の処理へ行いたい対場合、falseにした方が良いです。

読み込み後の処理

7行目でthen(成功,失敗)の処理が分かれています。
8～15行目では読み込み成功時の処理を、16～19行目では読み込み失敗時の処理を記述しています。

また、11行目でJSONファイルのデータ全てをコンソールへ出力、
12～14行目でJSON内の配列データを1つずつコンソールへ出力しています。

then()ではなく、done()・fail()を使うことも可能です。
また、どの場合でも処理するconplete()関数もあります。

注意点

Jquery1.8未満では、success()、error()、conplete()が使用されていましたが、現在は非推奨の関数となっております。
上記の関数が無くなることに備えて、done()、fail()、complete()を使用するようにしましょう。

done、fail、complete関数を使用した場合の記述です。

$.ajax({
    // 読み込み設定
}).done(function(json){
    // 成功
}).fail(function(){
    // 失敗
}).always(function(){
    // 常に最後に処理
});

$.getJSON()

$.getJSON()での読み込み方法です。

$.getJSON("data.json")
    .done(function (json) {
        // 成功
    }).fail(function () {
        // 失敗
    }).always(function () {
        // 常に最後に処理
    });

JSONファイルの読み込み -> $.ajax() -> 注意点で記述しているコードと似ています。
設定部分が$.ajax()と比べて少し簡略化されているところが違いですね！

$.ajax()でも、$.getJSON()でも使いやすいと思いますので、自分の好みで使用を決めていいと思います。

読み込みに失敗する場合

コンソール画面でエラーを確認

JSONファイルはちょっとしたミスで読み込めない場合が多くあります。
もちろん失敗した理由が分からなければ修正する方法も分かりません。

そこで、失敗時の関数でこのように記述し、コンソール画面を確認することである程度はエラーの内容を理解することができます。

$.ajax({
    ・・・略
}).then(
    function (json) {
        ・・・略
    },
    function (jqXHR, textStatus, errorThrown) {
        // 読み込み失敗時の処理
        console.log("読み込みに失敗しました");
        // httpステータス
        console.log("jqXHR : " + jqXHR.status);
        // タイムアウト、パースエラー
        console.log("textStatus : " + textStatus);
        // エラーの詳細情報
        console.log("errorThrown : " + errorThrown.message);
    }
);

大体は「jqXHR.status」と「errorThrown.message」の内容をネット検索等、調べたらエラーを解決することができると思います。