2020/09/26

JavaScriptでJSONデータを操作する方法【現役エンジニアが解説】

PROGRAM

今回は、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を配列にするサンプルコードです。

• facebook
• Tweet
• Read Later