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

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

 

 

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

 

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」と言う拡張子で保存する。

 

<strong>JavaScriptにおけるJsonデータ</strong>

“キー”:”バリュー”という書式でデータを格納する。

ファイルにして保存する際は「.json」と言う拡張子で保存する

 

 

Jsonデータの読み込み(JSON.parseメソッド)

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

#Jsonデータの読み込み

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オブジェクトのデータへのアクセス方法

 




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

var jsonData = '{"1": "hara-chan","2": "hoge-chan"}';
var jsonObject = JSON.parse(jsonData);
console.log(jsonObject[1]);
jsonデータキーが数字のデータへのアクセス

 

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データを読み込む:JSON.parseメソッド(オブジェクトに変換する)
  • Jsonデータを書き込む:JSON.stringifyメソッド(Jsonデータに変換する)

 

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

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

 

 

関連

【JavaScript】setTimeout関数の使い方
(JavaScript) Jsonデータの読み込み・書き込み方法
(JavaScript) getElementsByClassNameの結果をforEachしたい時の対処法
(JavaScript) 配列の変数をpushすると参照渡しになる
(JavaScript) 引数にthisやeventを使う方法・違いなどを解説
(JavaScript) オブジェクトにプロパティを追加・削除する方法
(JavaScript) オブジェクトからキーの一覧を取得する方法
(JavaScript) var、let、constの違い【適切な使い分け】
(JavaScript) ファイル名から拡張子を取得する方法

 

 

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

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。