JavaScriptでJSONデータを操作する方法【現役エンジニアが解説】
今回は、JavaScriptでJSONデータを操作する方法について、配列をJSON化する方法とJSONから配列化する方法に分け、簡単に解説していきます。
配列をJSON化する方法
配列をJSON化するには、JSONのstringifyメソッドを使います。
JSONのstringifyメソッドでは、引数に指定した配列をJSONに変換します。
var data = { name: "Tanaka", age: 22, gender: "Male" }; var json = JSON.stringify(data);
上記のコードでは、dataという連想配列をJSONのstringifyメソッドでJSONに変換しています。
JSONから配列化する方法
一方で、JSONを配列化するには、JSONのparseメソッドを使います。
JSONのparseメソッドでは、引数に指定したJSONを配列に変換し、返します。
var json = '{"name":"Tanaka","age":22,"gender":"Male"}'; var data = JSON.parse(json);
上記のコードでは、連想配列の構成のJSONを、JSONのparseメソッドで、JavaScriptの連想配列に変換しています。
XMLHttpRequestでJSONをやり取りする方法
JSONはXMLHttpRequestでのAPIとの通信によく使われるデータ形式です。
XMLHttpRequestでJSONをやり取りするには、ヘッダのContenty-typeに”application/json;”を指定する必要があります。
var xhr = new XMLHttpRequest(); xhr.open("POST", "https://example.com/", true); xhr.onload = function (e) { if (xhr.readyState === 4) { if (xhr.status === 200) { // 通信成功の場合の処理を書く var result = JSON.parse(xhr.responseText); } else { // サーバエラーの場合の処理を書く console.error(xhr.statusText); } } }; xhr.onerror = function (e) { // 通信エラーの場合の処理を書く console.error(xhr.statusText); }; var data = { name: "Tanaka", age: 22, gender: "Male" }; var json = JSON.stringify(data); xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); xhr.send(json);
上記のコードは、dataという連想配列をJSONにしてXMLHttpRequestでサーバにリクエストし、レスポンスとして受け取ったJSONを配列にするサンプルコードです。