(JavaScript) Jsonデータの読み込み・書き込み方法

JavaScriptを書いていて、
Jsonのデータを読み込んだり書き込んだりする機会があったので、その方法をメモ。

Jsonデータとは

JSONの形式（ルール）に従って書かれているデータのこと。
ファイルにして保存する際は「.json」と言う拡張子で保存する。

以下Jsonデータのサンプル。

{
　"name": "hara-chan"
　"age": 82,
　"history": {
　　"elementary-school": [ "Tokyo", "Kasumigaseki" ],
　　"junior-high-school": [ Tokyo", "Hachioji" ],
　　"high-school": [ "Okinawa", "Menso-re" ]
　}
}

Jsonの形式

Jsonの基本的な形式は以下

{
    キー：バリュー
}

キーに対してその値（バリュー）を格納する。
サンプルで紹介した通り、ネスト構造にすることができ、また配列も使用できるので、柔軟に値を扱うことができる。

まあ今回はJsonの紹介ではないので、これくらいに。

Jsonデータの読み込み（JSON.parseメソッド）

Jsonデータの読み込みには、JSON.parseメソッドを使用する。
以下サンプル。

var jsonData = '{"name": "hara-chan"}';
var jsonObject = JSON.parse(jsonData);

上記のように、Json形式の文字列データをJSON.parseメソッドの引数に渡してやることで、読み込み結果をオブジェクトとして取得することができる。

※Jsonデータ自体はシングルクオーテーション、キーはダブルクオーテーションで囲むことに注意

Jsonデータの操作をJavaScriptを通して行うには、
いったんオブジェクトに変換してからでないとできないので変換を行う。

JavaScriptのオブジェクトの作成方法

Jsonとは関係ないが参考までに、「オブジェクトの作成」だけなら以下の方法で可能

var obj = new Object();

JavaScriptのオブジェクトデータにアクセスする方法

取得したオブジェクトのデータにアクセスする書式は以下。

オブジェクト.キー

キーを指定してバリューにアクセスする。
サンプルのデータにアクセスする例を紹介すると以下のようになる。

var jsonData = '{"name": "hara-chan"}';
var jsonObject = JSON.parse(jsonData);
console.log(jsonObject.name);

キーが数字（ダブルクオーテーションは付ける）の場合は、
JSON.[キーの数字]としてアクセスすることも可能。

var jsonData = '{"1": "hara-chan","2": "hoge-chan"}';
var jsonObject = JSON.parse(jsonData);
console.log(jsonObject[1]);

JavaScriptのオブジェクトにデータを代入する方法

オブジェクトにデータを代入したい時は、下記の書式。

オブジェクト.キー = バリュー;

キーに対して、紐づくバリューを代入してやればOK。
以下例。

#'{"name" : "hara-chan"}'を代入するには下記
Obj.name = "hara-chan";

#'{"1" : "apple"}'を代入するには下記
Obj.[1] = "apple";

#オブジェクトを代入してネストすることも可能
var obj = new Object();
    for (var i=0; i<10; i++) {
	obj[i] = new Object();
    }
}

Jsonデータの書き込み（JSON.stringifyメソッド）

書き込みと書いたが、
要はオブジェクトをJsonデータ（つまりただの文字列）に戻す方法のことだ。
オブジェクトをJsonデータに戻すには、JSON.stringifyメソッドを使用する。

var jsonData = JSON.stringify(jsonObject);

上記のように、オブジェクトをJSON.stringifyメソッドの引数に渡してやることで、戻り値としてJsonデータを受け取ることができる。

Jsonデータに戻した後はただのテキストデータ（文字列）なので、データをサーバに送ってJSONファイルとして保存するなりし、また読み込んで編集したい際は保存したJSONファイルをJavaScript側でJSON.parseしてやれば良いと言うことだ。

まとめ