[JavaScript] JSONデータのエンコード・デコードまとめ

JSONデータを扱う場面は多々あります。

今回はJavaScriptを利用して、配列オブジェクトをJSONデータにエンコードおよび、JSONデータを配列にデコードする方法の備忘録となります。

配列をJSONデータにエンコード

配列オブジェクトをJSONデータに変換する場合は「JSON.stringify()」を利用してエンコードします。

var arr = {
  User1: {
    name: "John",
    age: 21,
    enabled: true
  },
  User2: {
    name: "Akira",
    age: 25,
    enabled: false
  }
};

var json = JSON.stringify(arr);
console.log(json);
// {"User1":{"name":"John","age":21,"enabled":true},"User2":{"name":"Akira","age":25,"enabled":false}}

JSON.stringify() は オプション引数を指定することができます。

JSON.stringify(value[, replacer[, space]])

replacerは文字列化の手順の挙動を変更するオプションとなっています。

たとえば、User2の情報のみを取り出したいと考えた場合、下記のようなコードで可能となります。

var arr = {
  User1: {
    name: "John",
    age: 21,
    enabled: true
  },
  User2: {
    name: "Akira",
    age: 25,
    enabled: false
  }
};

function replacer(key,value){
  if (key === 'User1') {
		return undefined;
	}
	return value;
}

var json = JSON.stringify(arr, replacer);
console.log(json);
// {"User2":{"name":"Akira","age":25,"enabled":false}}

spaceオプションはインデントを指定します。

可読性を向上させる場合などで利用します。

var json = JSON.stringify(arr, replacer, 2);
console.log(json);
//{
//  "User2": {
//    "name": "Akira",
//    "age": 25,
//    "enabled": false
//  }
//}

JSONデータを配列にデコード

JSONデータを配列オブジェクトに変換する場合は「JSON.parse()」を利用します。

var jsonData = '{"User1":{"name":"John","age":21,"enabled":true},"User2":{"name":"Akira","age":25,"enabled":false}}';
let obj = JSON.parse(jsonData);
console.log(typeof obj);
// object

もともとJSON文字列（string）だったデータがobject型に変換されているのがわかります。

じつはこのJSON.parse()にもオプションがあり、下記のような構文となります。

JSON.parse(text, reviver)

reviver 部分は元のJSONデータの値に対して何らかの処理を追加した結果を返すことができます。

たとえば、User2のみを配列オブジェクト化したい場合は下記のようになります。

var jsonData = '{"User1":{"name":"John","age":21,"enabled":true},"User2":{"name":"Akira","age":25,"enabled":false}}';
let obj = JSON.parse(jsonData, function( key, value ) {
	if ( key != "User1" ) return value ;
});
console.log(obj);
// { User2: { name: 'Akira', age: 25, enabled: false } }

User2のみが配列オブジェクトとなりました。

最後に

JSONエンコード・デコード処理は様々な場面で利用する機会が多いため自身のスキルとしてインプットしておくと良いかと思います。