JSON JavaScript Object Notation
JavaScriptのJSONオブジェクトには、オブジェクトをJSONに変換するメソッドと、 逆にJSONをオブジェクトに変換するメソッドが用意されています。
オブジェクトからJSON文字列への変換(文字列化・シリアライズ)
オブジェクトからJSONへの変換は、JSON.stringify(value, replace, space)で行う。
各引数の意味は以下の通りです。
- value 変換を行うオブジェクト
- replace 変換時の置き換えに使用する関数、または、配列
- space 可読性のための数値、または、文字列
以下は、valueのみを指定した場合です。
const instance = { name: 'Taro Yamada', age: 25 , joinDate: new Date(2010, 5, 1), isRetired: false };
const jsonString = JSON.stringify(instance);
console.log(jsonString);
//"{"name":"Taro Yamada","age":25,"joinDate":"2010-05-31T15:00:00.000Z","isRetired":false}"
replaceに関数を、spaceに数値4を指定すると以下のようになります。
ブロックの区切りにスペース4つが挿入され見やすくなります。
const instance = { name: 'Taro Yamada', age: 25 , joinDate: new Date(2010, 5, 1), isRetired: false };
const replacer = function replacer(key, value) {
if (key === 'name') {
// 氏名を分ける
let [firstName,lastName] = value.split(' ');
return { first: firstName, last:lastName };
}
if(key === 'age'){
// ageを加算
return value + 1;
}
if(key === 'isRetired'){
// nullを返却するとJSONに項目が残る
return undefined;
}
return value;
}
const jsonStringWithReplacer = JSON.stringify(instance,replacer,4);
console.log(jsonStringWithReplacer);
/*
{
"name": {
"first": "Taro",
"last": "Yamada"
},
"age": 26,
"joinDate": "2010-05-31T15:00:00.000Z"
}
*/replaceに配列を指定すると指定した名称のプロパティのみが出力対象となります。
spaceに文字列を指定すると、それが区切り文字となります。
const instance = { name: 'Taro Yamada', age: 25 , joinDate: new Date(2010, 5, 1), isRetired: false };
const jsonStringWithReplacer = JSON.stringify(instance, ['name', 'isRetired'], '\t');
console.log(jsonStringWithReplacer);
/*
{
"name": "Taro Yamada",
"isRetired": false
}
*/JSON文字列からオブジェクトへの変換(インスタンス化・デシリアライズ)
JSONからオブジェクトへの変換は、JSON.parse(text, reviver)で行う。
各引数の意味は以下の通りです。
- text 変換を行うJSON
- reviver 変換時の置き換えに使用する関数
const jsonString = '{"name":"Taro Yamada","age":25,"joinDate":"2010-05-31T15:00:00.000Z","isRetired":false}';
const instance = JSON.parse(jsonString);
console.log(instance);
//{name: "Taro Yamada", age: 25, joinDate: "2010-05-31T15:00:00.000Z", isRetired: false}
reviverで特定のプロパティの設定方法を指定できます。
const jsonString = '{"name":"Taro Yamada","age":25,"joinDate":"2010-05-31T15:00:00.000Z","isRetired":false}';
const reviver = function reviver(key, value){
if (key == `joinDate`){
let dateTime = Date.parse(value);
return dateTime ? new Date(dateTime) : null;
}
return value;
};
const instance = JSON.parse(jsonString, reviver);
console.log(instance);
//{name: "Taro Yamada", age: 25, joinDate: Tue Jun 01 2010 00:00:00 GMT+0900 (日本標準時), isRetired: false}