本記事では、JavaScriptのオブジェクトをJSONに変換する方法について解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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に変換してくれます。
