本記事では、JavaScriptでJSONをオブジェクトに変換する方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
JSON.parseメソッドの使い方
JSONをオブジェクトに変換したい時は、JSON.parseメソッドを使用します。基本的な使い方は以下のとおりです。
let result = JSON.parse(jsonデータ, [function]);構文解説
- result：オブジェクト形式に変換されたJSONが代入される
- jsonデータ(第一引数)：オブジェクト形式に変換したいJSONを指定
- function(第二引数)：データを加工したい場合は処理を記述する(省略可能)
実際にJSON.parseメソッドを使用してオブジェクト形式に変換してみましょう。
let jsonData = '{"name": "Taro", "age": 20, "gender": "male", "hobby":["Soccer", "Reading"]}';
let personObj = JSON.parse(jsonData);
console.log(personObj); // => {name: 'Taro', age: 20, gender: 'male', hobby: ['Soccer', 'Reading']}
console.log(personObj.name); // => Taro
console.log(personObj.hobby[0]); // => Soccer「オブジェクト.プロパティ名」で値を取得することが出来ました。これでJSONをオブジェクトのように扱うことが可能になります。
続いて、省略可能な第二引数の関数を使用してデータを加工してみましょう。今回は、JSONの年齢(age)を-2歳若くしたデータをpersonObjに渡したいと思います。
let jsonData = '{"name": "Taro", "age": 20, "gender": "male", "hobby":["Soccer", "Reading"]}';
let personObj = JSON.parse(jsonData, (key, value) => {
if (key === "age") {
return value - 2;
}
return value;
});
console.log(personObj); // => {name: 'Taro', age: 18, gender: 'male', hobby: ['Soccer', 'Reading']
console.log(personObj.age); // => 18関数の第一引数(key)にはプロパティ名が渡され、第二引数(value)には値が渡されます。
if文を使用してkeyの値がageの時にだけ「return value -2」を返します。するとvalueの値が-2されたデータを渡すことが出来ます。
それ以外は特にデータを加工しないので、「return value」でそのまま返してあげます。
