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を使えば柔軟にデータ管理が行えるのでお勧めです。
以上で解説を終わります。
目次
