JavaScript オブジェクトを JSON に変換する

1. console.log(jsObject) を使用した JavaScript オブジェクトの表示
2. JSON.stringify() を使用して JSON オブジェクトを文字列に変換する
3. カスタム記述コードを使用して JavaScript オブジェクトを JSON に変換する
4. JSON 文字列から JavaScript オブジェクトを取り戻す

JSON は、JavaScript でオブジェクトを表すために一般的に使用されるデータ転送形式です。データを転送するためのほとんどのクライアント/サーバー通信では、JSON 形式を標準形式として使用しています。JSON 表記は、JavaScript オブジェクトの人間が読める形式であるため、使いやすく、解釈も簡単です。javascript オブジェクトを JSON 形式に変換するのは簡単です。以下の方法で変換できます。

console.log(jsObject) を使用した JavaScript オブジェクトの表示

console.log 関数は、Web コンソールにメッセージを出力するように構築されています。Web ブラウザの開発ツールを使用してメッセージを表示できます。conosle.log() 関数は、オブジェクト、メッセージ、さらにはサブストリングを受け入れます。したがって、JavaScript オブジェクトの外観を理解するのに役立つのが最適です。オブジェクトを保持する変数を console.log すると、その視覚的な JSON 表現が得られます。次のコードは、console.log を使用した javascript オブジェクトの表現を示しています。

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(a);

出力：

{id: 1, name: "icy-cream", flavor: "vanilla"}

上記のコードでは、console.log(a) がオブジェクト a の JSON 形式を出力します。conosle.log() が使いにくい Internet Explorer を含むすべてのブラウザーでサポートされているため、javascript オブジェクトのすべてのブラウザーで同じ JSON 表現を受け取ります。console.log() オプションを使用すると、オブジェクトの JSON 表現のみを表示でき、Web コンソールで表示する以外に、オブジェクトを編集したり、他のプログラムによるデータ処理に使用したりすることはできません。

JSON.stringify() を使用して JSON オブジェクトを文字列に変換する

javascript オブジェクトの JSON 表現を取得する別の方法は、JSON.stringify() メソッドを使用することです。JavaScript オブジェクトの JSON 形式を使用し、JSON.stringify() メソッドを使用して変数に割り当てることができます。JSON.stringify() は javascript オブジェクトを変換し、オブジェクトの JSON 値を文字列データとして返します。

構文

JSON.stringify(<JSObject>)

パラメーター

この関数は、JavaScript オブジェクトをパラメーターとして受け取り、replacer 関数を受け入れ、space count をオプションのパラメーターとして受け入れます。

• JSON.stringify() 関数の最初のパラメーターとして、JSON に変換するターゲット JavaScript オブジェクトを指定します。
• replacer 関数を使用して JSON オブジェクトを変更します。これを使用して、オブジェクトを JSON 形式に変換する前に、オブジェクトから除外する属性を指定できます。
• space count パラメーターは、人間が読める形式にするために出力 JSON 文字列に入れるスペース文字の数を指定する数値または文字列値です。

戻り値

JSON.stringify() は、JavaScript オブジェクトの文字列 JSON 形式を返します。

使用法

前のセクションで使用したのと同じオブジェクトを使用しましょう。ただし、今回は JSON.stringify() を使用して JSON 文字列に変換します。次のコードを参照してください。

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(JSON.stringify(a));
console.log(JSON.stringify(a, null, 0));
console.log(JSON.stringify(a, null, 5));

出力：

{"id":1,"name":"icy-cream","flavor":"vanilla"}
{"id":1,"name":"icy-cream","flavor":"vanilla"}
{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}

JSON.stringify() 関数の 3 番目のパラメーターに数値を使用すると、より読みやすい JSON 文字列が出力として取得されます。このメソッドは、JSON の各キーと値のペアの前に指定された数のスペースを追加することにより、JSON をフォーマットします。たとえば、JSON.stringify(a, null, 5) では、オブジェクト a の id パラメータは 5つのスペース文字の後に配置されます。

カスタム記述コードを使用して JavaScript オブジェクトを JSON に変換する

JavaScript オブジェクトを JSON 形式に変換するコードを作成する場合は、Object.keys() 関数を使用する必要があります。Object.keys() は、オブジェクトの keys を抽出し、keys を含む配列を返す javascript メソッドです。したがって、カスタムコードを使用して、JavaScript オブジェクトの keys と値を組み合わせ、それらを {} 中括弧で囲んで、JavaScript オブジェクトの JSON 表現を取得します。以下のコードを見てみましょう。

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
var keys = Object.keys(a);
var JSONOut = '{';
for (let i = 0; i < keys.length; i++) {
  JSONOut = JSONOut + `"${keys[i]}":"${a[keys[i]]}",`;
}
JSONOut = JSONOut + '}';
console.log(JSONOut);

出力：

{"id":"1","name":"icy-cream","flavor":"vanilla",}

JSON 文字列から JavaScript オブジェクトを取り戻す

ほとんどの Web アプリケーションでは、JavaScript オブジェクトを JSON 文字列としてデータベースに保存しているため、後で同じ UI を簡単にレンダリングできます。JSON を JSON 文字列としてデータベースに保存する場合があります。REST API を使用してデータベースから取得した JSON 文字列に対応する JSON または JavaScript オブジェクトを取得するにはどうすればよいですか？JavaScript には、JSON を JavaScript オブジェクトに変換するための JSON.parse() メソッドがあります。次のコードを参照してください。

var response = `{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}`
console.log(JSON.parse(response));
var a = JSON.parse(response);
a.id = 20;
console.log(a);

出力：

{id: 1, name: "icy-cream", flavor: "vanilla"}
{id: 20, name: "icy-cream", flavor: "vanilla"}

上記のコードを使用して、JSON.parse() メソッドによって JSON 文字列を javascript オブジェクトに変換し直し、変数に割り当てました。同じ javascript オブジェクトの id 属性の値を変更すると、属性値も変更されます。したがって、文字列 JSON を、コードでプログラムで処理できる有効な javascript オブジェクトに変換できます。チルダ文字を使用して、複数の改行を含む文字列を受け入れることができることに注意してください。