本記事では、
Jsonのデータを読み込んだり書き込んだりする機会があったので、その方法をメモ。
Contents
Jsonデータとは
JavaScriptにおける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.parseメソッド）
Jsonデータの読み込みには、
JSON.parseメソッドを使用する。
以下サンプル。
#Jsonデータの読み込み
var jsonData = '{"name": "hara-chan"}';
var jsonObject = JSON.parse(jsonData); ＃Jsondデータ読み込み
JSON.parseメソッドの引数に、Json形式の文字列データを渡してやることで、
読み込み結果をオブジェクトとして取得することができる。
Jsonデータの操作をJavaScriptを通して行うには、
いったんオブジェクトに変換してからでないとできないので変換を行う。
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のオブジェクトにデータを代入する方法
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();
}
}
JavaScriptのオブジェクトの作成方法
Jsonとは関係ないが参考までに、
「JavaScriptの、オブジェクトの作成」だけなら以下の方法で可能
#JavaScriptのオブジェクトの作成
var obj = new Object();
Jsonデータの書き込み（JSON.stringifyメソッド）
オブジェクトをJsonデータに戻すには、
JSON.stringifyメソッドを使用する。
書き込みと書いたが、
要はオブジェクトをJsonデータ（つまりただの文字列）に戻す方法のことだ。
#オブジェクトJsonデータに戻す
var jsonData = JSON.stringify(jsonObject);
上記のように、
オブジェクトをJSON.stringifyメソッドの引数に渡してやることで、戻り値としてJsonデータを受け取ることができる。
Jsonデータに戻した後はただのテキストデータ（文字列）なので、データをサーバに送ってJSONファイルとして保存するなりし、また読み込んで編集したい際は保存したJSONファイルをJavaScript側でJSON.parseしてやれば良いと言うことだ。
まとめ
- Jsonデータを読み込む：JSON.parseメソッド（オブジェクトに変換する）
- Jsonデータを書き込む：JSON.stringifyメソッド（Jsonデータに変換する）
おまけ：PHPからjsonデータを読み書きする方法
PHPからjsonファイルを読み込み・書き込みする方法と言うのも下記記事にて紹介しているので、
もし気が向いたら読んで欲しい。
関連
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
“キー”：”バリュー”という書式でデータを格納する。
ファイルにして保存する際は「.json」と言う拡張子で保存する