JavaScriptのparseメソッドでJSONから値を取得するサンプルです。
parseメソッドは、JSONからJavaScriptのオブジェクトにします。
目次
サンプル | parseとは |
JSONから値を取得する | |
parseメソッドの引数に関数を使用する | |
(参考)JSONとJavaScriptのオブジェクトの違い |
parseとは
変数 = JSON.parse(変換するJSON [, 関数]) |
- parseメソッドは、JSONをJavaScriptのオブジェクトにします。
- 戻り値は、オブジェクトです。
- オブジェクト.JSONのキーを指定でJSONの値を取得できます。
- 以下は、MDNのparseのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
JSONから値を取得する
JSON.parse(JSON) |
<script>
const json1 = '{"color1":"赤","color2":"青"}';
const obj1 = JSON.parse(json1); //JSONからJsオブジェクトに変換
console.log(obj1.color1); //赤 (JSONの値を取得)
console.log(obj1["color1"]); //赤 (JSONの値を取得)
</script>
2行目は、JSONです。
4行目は、parseメソッドでJSONをJavaScriptのオブジェクトにしています。
6,8行目は、オブジェクトのキーを指定して値を表示しています。
parseメソッドの引数に関数を使用する
JSON.parse(JSON,関数) |
<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で返し、それ以外はそのまま返します。
11行目は、指定したキー(color1)の値のみが変更されています。
(参考)JSONとJavaScriptのオブジェクトの違い
以下は、JSONです。キーにダブルコーテーションがついています。
{
"color1":"赤",
"color2":"青"
}
以下は、JavaScriptオブジェクトです。
{
color1:"赤",
color2:"青"
}
以下は、JavaScriptオブジェクトをconsole.logで確認したものです。
矢印をクリックすると項目が下に展開されます。
関連の記事
JavaScript オブジェクトを走査するサンプル
JavaScriptオブジェクトをJSONにする(stringify)