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

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

今回は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関数を使えば可能です。

最後に

いかがでしたでしょうか。
今回はJSONデータの扱い方続編ということで、基本的な操作方法（参照・追加（更新）・削除）についてご紹介しました。
次はもう少し応用的な操作方法をご紹介できたらと思います。

良かったら次回も見てみてくださいね！

↓↓↓【JSON入門シリーズ♪】

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

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

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

nyanblog2222.com

2020.06.28

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

JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪

nyanblog2222.com

2020.06.30

投稿 【JSON入門】JSONデータの参照・追加（更新）・削除 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。JSONファイルについて、ご存じでしょうか。
本記事はJSONファイルについてと、基本的な扱い方についてご紹介します。

JSONファイルとは

どういうファイルなの？

JSONは「JavaScript Object Notation」で直訳すると、「JavaScriptのオブジェクト表記法」となります。

つまり、情報のやりとりができるテキストベースのデータ形式を表しています。
同じようなデータ形式で、XMLファイルが代表的な例としてよく挙げられています。

JSONの良いところ

JSONの特徴は主にこちらの3点を満たしており、この特徴を持つことで、サーバ間の通信やさまざまなプログラミング言語との共有を可能にしています。

• テキストデータのため、軽量
• オブジェクトのように扱える
• 単純な構造

オブジェクトとは似て非なるもの

先ほどのJSONの良いところでも上げましたが、相互変換が可能なため、JSONはオブジェクトのように扱うことができます。

しかし、JSONはテキストデータであり、オブジェクトではありません。

こちらの例を見てください。

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

// JSON
var json = { "name": "Hanako", "old": 18, "tel": "000-0000-2" };

テキストデータに変換する前のJSONは、連想配列に似た構造となっていますが、明確な違いがあります。
それはこちらです。

• プロパティのみ含めることができ、関数は含められない
• プロパティをダブルクォーテーション（””）で括る
  →括られた文字列のみプロパティとして使用できる

また、注意点として、カンマ、コロンが1つでも抜けているとJSONとして無効になる場合もあります。

この辺りを理解しておくだけでも、開発するときに違うと思います。

JSONの基本的な使い方

さっそく、試してみましょう。
今回はJSONとJavaScriptのオブジェクトとの、相互変換を行ってみます。

オブジェクトからJSONへ（エンコード encode）

stringfy関数
・JavaScriptのオブジェクトからJSONへの変換
・JSONデータとして通信する前に変換することが多い

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

var json = JSON.stringify(obj);
console.log(json)

JSONからオブジェクトへ（デコード decode）

parse関数
・JSONからJavaScriptへの変換
ファイルから読み込み後、プログラムで使用しやすいようにデコードする必要がある。

注意する点として、jsonはテキストベースなので全体をシングルクォートで括っています。

// JSON
var json = '{ "name": "Hanako", "old": 18, "tel": "000-0000-2" }';

var obj = JSON.parse(json);
console.log(obj)

まとめ

いかがでしたでしょうか。
今回はJSONの基本的な知識と、基本的な扱い方について、ご紹介しました。
次回はJSON登録や更新などについて、ご紹介していきます。

良かったら次回も見てみてくださいね！

↓↓↓【JSON入門シリーズ♪】

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

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

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

nyanblog2222.com

2020.06.28

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

JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪

nyanblog2222.com

2020.06.30

投稿 【JSON入門】JSONとは？JS相互変換について(stringify/parse) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。