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

JavaScriptを書いていて、
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.parseメソッド）

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

var jsonData = '{"name": "hara-chan"}';
var jsonObject = JSON.parse(jsonData);      ＃Jsondデータ読み込み

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

※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のオブジェクトにデータを代入する方法

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

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

キーに対して、紐づくバリューを代入してやれば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とは関係ないが参考までに、「オブジェクトの作成」だけなら以下の方法で可能

var obj = new Object();

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

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

var jsonData = JSON.stringify(jsonObject);

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

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

まとめ

おまけ：PHPからjsonデータを読み書きする方法

PHPからjsonファイルを読み込み・書き込みする方法と言うのも下記記事にて紹介しているので、
もし気が向いたら読んで欲しい。

合わせて読みたい

PHPからjsonファイルを読み込み・書き込みする方法

2021.09.13