JavaScriptのJSONをJavaScriptオブジェクトにするサンプルです。
parseメソッドを使用します。
| 確認環境 ・Windows10 ・Google Chrome |
目次
parseメソッド
| 変数 = JSON.parse(JSON [, 関数]) |
- JSONをJavaScriptのオブジェクトにします。
- 戻り値は、オブジェクトです。
- 以下は、MDNのparseのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
JSONとJavaScriptオブジェクト
JSONは、キーにダブルコーテーションがついています。
{
"color1":"赤",
"color2":"青"
}
上記JSONをparseメソッドで変換すると以下のJavaScriptオブジェクトになります。
{
color1:"赤",
color2:"青"
}
以下は、JavaScriptオブジェクトをconsole.logで確認したものです。
矢印をクリックすると項目が下に展開されます。

JSONをJavaScriptのオブジェクトにする
JSONをJavaScriptのオブジェクトにするサンプルです。
<script>
const json1 = '{"color1":"赤","color2":"青"}';
const obj1 = JSON.parse(json1);
console.log(obj1.color1); //赤
console.log(obj1["color1"]); //赤
</script>
2行目は、JSONです。
4行目は、parseメソッドでJSONをJavaScriptのオブジェクトにしています。
6,8行目は、オブジェクトのキーを指定して値を表示しています。
JavaScriptのオブジェクトにする+関数でキーを指定して値を変更する
関数でキーを指定して値を変更するサンプルです。
<script>
const json1 = '{"color1":"赤","color2":"青"}';
const a = JSON.parse(json1,(key,value)=>{
if (key=="color1") {
return "red" ;
}
return value ;
} ) ;
console.log(a); //{color1: "red", color2: "青"}
</script>
2行目は、JSONです。
4行目は、parseメソッドの2つめの引数は関数です。
5-8行目は、キーがcolor1のとき、値をredで返し、それ以外はそのまま返します。
12行目は、指定したキー(color1)の値のみが変更されています。
関連の記事
JavaScript オブジェクトを作成するサンプル
JavaScript prototypeでメソッドを追加するサンプル
JavaScript 継承のサンプル(プロトタイプチェーン)
JavaScript 連想配列のサンプル
JavaScriptオブジェクトをJSONにする(stringify)