【JSON入門】JSONデータの参照・追加（更新）・削除

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。
詳しくは、こちらからご覧ください。

今回はJSONデータの扱い方の続編となります。
宜しければご覧ください。

操作するデータ
JSONデータを参照
1. データの参照方法
2. 特定のデータのみ参照する方法
JSONデータを追加
JSONデータを削除
最後に

操作するデータ

こちらが今回サンプルのデータです。
json_dataが配列、testはオブジェクトになっています。
※違いは” [ ] ”で括られているか、” { } ”で括られているかです。

var json_data = [
    { 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 : { jananese : 75, english : 35 }, }
];

JSONデータを参照

まずは、作成したJSONデータを参照する方法です。

データの参照方法

json_dataは配列のため、添え字でデータを参照することができます。
それ以外はオブジェクトの構造になっており、「オブジェクト.プロパティ」のように、ドットで参照することができます。

// name、school_year：プロパティ
console.log(json_data[0].name); // => yamada
console.log(json_data[1].school_year); // => 2

// testプロパティ（オブジェクト）にenglishプロパティを保持
console.log(json_data[2].test.english); // => 35

特定のデータのみ参照する方法

filter関数を使用することで、特定のデータのみ参照することができます。

// filter関数
var data = json_data.filter(function (item) {
    // 英語が50点以上の人のデータを取得
    return item.test.english >= 50;
});

// 条件に一致したデータの”name”を参照
data.forEach(function (value){
    console.log(value.name) // => yamada, hayashi
});

JSONデータを追加

新規プロパティを指定して値を追加

プロパティと値をそのままデータに追加する方法です。

それぞれ、
　配列と同じ階層にareaプロパティ「”Tokyo”」が追加
　配列添字 [1] 内のオブジェクトにareaプロパティ「”Osaka”」が追加
になっています。

json_data.area = "Tokyo";
json_data[1].area = "Osaka";

console.log(json_data)
// { name : "yamada", school_year : 2, test : { japanese : 65, english : 80 }, },
// { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, area: "Osaka" },
// { name : "sato", school_year : 1,  test : { jananese : 75, english : 35 }, },
// area: "Toyko"

push関数でオブジェクトを追加

オブジェクトを作成してpush関数を使う方法です。
push関数で追加したオブジェクトは末尾に追加されます。

var new_data = { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, };
json_data.push(new_data);

// 末尾のデータ
console.log(json_data[json_data.length - 1])
// { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, }

値やオブジェクトを更新する場合

データ内の値やオブジェクトを更新する場合、配列やオブジェクトをそのまま指定して値を設定するだけで更新が可能です。

// プロパティの値を指定
json_data[1].area = "Osaka";
console.log(json_data[1].area) // => Osaka

json_data[1].area = "Nagoya";
console.log(json_data[1].area) // => Nagoya

// オブジェクトを更新
console.log(json_data[2])
// { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, }

var new_data = { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, };

// name:"hayashi"オブジェクトを"tanaka"オブジェクトに更新
json_data[2] = new_data;
console.log(json_data[2])
// { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, }

JSONデータを削除

指定のプロパティを削除するときは、「delete」演算子を使用します。

// 各配列の"school_year"を削除
json_data.forEach(function (value) {
    delete value.school_year;
    console.log(value)
});

// { name : "yamada", test : { japanese : 65, english : 80 }, },
// { name : "hayashi", test : { japanese : 45, english : 95 }, },
// { name : "sato", test : { jananese : 75, english : 35 }, },

配列の要素を削除したい場合は、削除したい要素をfalse条件にしてfilter関数を使えば可能です。