JavaScript

【JavaScript】JSONをオブジェクトに変換する方法

本記事では、JavaScriptでJSONをオブジェクトに変換する方法について解説しています。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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」でそのまま返してあげます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村