【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/10/06 13:34時点 | 楽天市場調べ)
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

JSON.stringifyメソッドの使い方

JSONをオブジェクトに変換したい時は、JSON.parseメソッドを使用しますが、逆のオブジェクトをJSONに変換したい時は、JSON.stringifyメソッドを使用します。

基本的な使い方は以下のとおりです。

let result = JSON.stringify(value [,replacer] [,space]);
構文解説
  • result:JSONに変換されたオブジェクトが代入される
  • value(第一引数):JSONに変換したいオブジェクトを指定
  • replacer(第二引数):データを加工したい場合は処理を記述する(省略可能)
  • space(第三引数):インデントや空白などを入れてJSONを読みやすくする(省略可能)

実際に、JSON.stringifyメソッドを使用してオブジェクトをJSONに変換してみましょう。

let personObj = {
  name: "Taro",
  age: 20,
  gender: "male",
  hobby: ["Soccer", "Reading"],
};

let result = JSON.stringify(personObj);
console.log(result); // => {"name":"Taro","age":20,"gender":"male","hobby":["Soccer","Reading"]}

第二引数を指定する

データを加工する

データを加工してJSONに変換したい場合は、第二引数に関数をセットし処理を記述します。

let result = JSON.stringify(value, (key, value) => {
  /* データを加工する処理を記述 */
});
引数
  • key(第一引数):プロパティが渡される
  • value(第二引数):値が渡される

実際に、第二引数に関数をセットしてデータを加工してみましょう。

let personObj = {
  name: "taro",
  age: 20,
  gender: "male",
  hobby: ["Soccer", "Reading"],
};

let result = JSON.stringify(personObj, (key, value) => {
  if (key === "name") {
    const firstLetter = value.substring(0, 1).toUpperCase();
    const otherLetter = value.substring(1).toLowerCase();
    return `${firstLetter}${otherLetter}`;
  }
  return value;
});

console.log(result); // => {"name":"Taro","age":20,"gender":"male","hobby":["Soccer","Reading"]}

上記のコードは、nameプロパティにセットされている値の先頭文字を大文字に加工してからJSONに変換します。加工したデータはreturnで返します。

特定のプロパティ/値のみJSONに変換する

第二引数はデータ加工だけでなく、配列を渡してあげることで特定のプロパティ/値のみJSONに変換することが出来ます。

let result = JSON.stringify(value, ["プロパティ名"]);
第二引数
  • プロパティ名:JSONに変換したいプロパティ名を指定(複数ある場合は「,」で区切る)

実際に、第二引数にプロパティ名を指定してみましょう。

let personObj = {
  name: "taro",
  age: 20,
  gender: "male",
  hobby: ["Soccer", "Reading"],
};

let result = JSON.stringify(personObj, ["name", "gender"]);
console.log(result); // => {"name":"taro","gender":"male"}

上記のコードは、第二引数にnameプロパティとgenderプロパティを指定しています。変換されたJSONを確認すると、ageとhobbyが除外されていることが分かります。

第三引数を指定する

インデントや空白などを入れてJSONを読みやすくしたい場合は、第三引数(space)を指定します。

let result = JSON.stringify(value [,replacer] [,space]);

第三引数に指定した空白などは、プロパティ名の前に挿入されます。文字を読みやすくする目的で使用されるのが一般的ですが、第三引数に特定の文字列を指定すればその文字列がプロパティ名の前に挿入されます。

let personObj = {
  name: "taro",
  age: 20,
  gender: "male",
  hobby: ["Soccer", "Reading"],
};

let result1 = JSON.stringify(personObj, null, " ");
console.log(result1);
/*{
 "name": "taro",
 "age": 20,
 "gender": "male",
 "hobby": [
  "Soccer",
  "Reading"
 ]
}*/

let result2 = JSON.stringify(personObj, null, "◯");
console.log(result2);
/*{
◯"name": "taro",
◯"age": 20,
◯"gender": "male",
◯"hobby": [
◯◯"Soccer",
◯◯"Reading"
◯]
}
 */

第二引数を使用しない場合は、nullを指定するとオブジェクトの中身(プロパティ/値)を全てJSONに変換してくれます。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次