JSON.parse()とJSON.stringify()の使用方法
序章
最新のすべてのブラウザーで使用可能なJSONオブジェクトには、JSON形式のコンテンツを処理するための2つの便利なメソッドparse
とstringify
があります。
JSON.parse()
JSON.parse()
はJSON文字列を受け取り、それをJavaScriptオブジェクトに変換します。
let userStr = '{"name":"Sammy","email":"[email protected]","plan":"Pro"}';
let userObj = JSON.parse(userStr);
console.log(userObj);
このコードを実行すると、次の出力が生成されます。
Output{name: 'Sammy', email: '[email protected]', plan: 'Pro'}
email: "[email protected]"
name: "Sammy"
plan: "Pro"
末尾のカンマはJSONでは無効であるため、渡された文字列に末尾のカンマが含まれている場合、JSON.parse()
はエラーをスローします。
JSON.parse()
は、オブジェクトの値が返される前に変換できる2番目の引数として関数を受け取ることができます。
ここで、オブジェクトの値は、parse
メソッドの返されたオブジェクトで大文字に変換されます。
let userStr = '{"name":"Sammy","email":"[email protected]","plan":"Pro"}';
let userObj = JSON.parse(userStr, (key, value) => {
if (typeof value === 'string') {
return value.toUpperCase();
}
return value;
});
console.log(userObj);
このコードを実行すると、次の出力が生成されます。
Output{name: 'SAMMY', email: '[email protected]', plan: 'PRO'}
email: "[email protected]"
name: "SAMMY"
plan: "PRO"
値は大文字に変換されています。
JSON.stringify()
JSON.stringify()
はJavaScriptオブジェクトを受け取り、それをJSON文字列に変換します。
let userObj = {
name: "Sammy",
email: "[email protected]",
plan: "Pro"
};
let userStr = JSON.stringify(userObj);
console.log(userStr);
このコードを実行すると、次の出力が生成されます。
Output{"name":"Sammy","email":"[email protected]","plan":"Pro"}
JSON.stringify()
は2つの追加の引数を取ることができます。 1つ目はreplacer
関数です。 2つ目は、返された文字列でspace
として使用するString
またはNumber
の値です。
undefined
として返される値は、返される文字列から除外されるため、replacer関数を使用して値を除外できます。
let userObj = {
name: "Sammy",
email: "[email protected]",
plan: "Pro"
};
function replacer(key, value) {
console.log(typeof value);
if (key === 'email') {
return undefined;
}
return value;
}
let userStrReplacer = JSON.stringify(userObj, replacer);
console.log(userStrReplacer);
このコードを実行すると、次の出力が生成されます。
Output{"name":"Sammy","plan":"Pro"}
email
キーと値のペアがオブジェクトから削除されました。
そして、space
引数が渡された例:
let userObj = {
name: "Sammy",
email: "[email protected]",
plan: "Pro"
};
let userStrSpace = JSON.stringify(user, null, '...');
console.log(userStrSpace);
このコードを実行すると、次の出力が生成されます。
Output{
..."name": "Sammy",
..."email": "[email protected]",
..."plan": "Pro"
}
インデントは...
に置き換えられました。
結論
このチュートリアルでは、JSON.parse()
およびJSON.stringify()
メソッドを使用しました。 JavascriptでJSONを操作する方法について詳しく知りたい場合は、JavaScriptでJSONを操作する方法チュートリアルをご覧ください。
JavaScriptでのコーディングの詳細については、 JavaScriptでコーディングする方法シリーズをご覧になるか、演習やプログラミングプロジェクトについてはJavaScriptトピックページをご覧ください。