JavaScript 配列でJSON.stringifyを使う

JSON.stringifyとJSON.parseの使い方

JavaScriptでは
データ交換フォーマットとして、
JSONが使われています。

JavaScriptでオブジェクトを要素に持つ配列を、
JSON形式のデータフォーマットにするとき、
JSON.stringifyメソッドが使用します。
逆にJSON形式のデータを元に戻すときは、
JSON.parseメソッドを使います。

JSONの何が良いのかというと、
Firebaseなどモバイルバックエンドサービスで、
データを保存するとき、
JSON形式の データフォーマットが必要になるためです。

サンプル例として、
要素は一つの、
array1のオブジェクト要素の配列に、
JSON.stringify(array1)を適用しています。
結果は、オブジェクト要素のプロパテイ名を、
二重引用符で囲んだ文字列になります。
非常にシンプルです。
プロパテイ名を二重引用符で囲んだだけです。

JSON.parse(json1)と parseを使うと、
元の配列に戻ります。

let array1=[{test:true,result:100}];
let json1=JSON.stringify(array1);
console.log(json1);

let array2=JSON.parse(json1);
console.log(array2);

[{"test":true,"result":100}]
[ { test: true, result: 100 } ]

もう少し具体的な例として、
「JavaScript 要素にオブジェクトを持つ配列、
およびreverse」ページで登場の、
courses配列で、JSON.stringifyを使って見ます。

SON.stringifyを使い、
そして、
connsole.logでjson1を表示します。

結果は、サンプル例と同じように、
オブジェクト要素のプロパテイ名が、
二重引用符で囲まれています。

データ数が大きくなると、
Angularなど、フロントエンドサービスの他に、
データを保存したり、取り出したりする、
バックエンドサービスが必要になります。
こういったとき、JSONが活躍します。

const courses=[
    {
        id: 1,
        description: "Angular Core ",
        iconUrl: 'https://...',
        longDescription: "The Core modules ",
        lessonsCount: 10,
        category: 'BEGINNER'
    },
    {
        id: 2,
        description: "Angular Ngrx ",
        iconUrl: 'https://...',
        longDescription: "Store, Effects, Router Store, Ngrx Entity",
        lessonsCount: 10,
        category: 'ADVANCED',
        lessonsCount: 8
    },
]

 const json1=JSON.stringify(courses);
 console.log(json1);


[{"id":1,"description":"Angular Core ","iconUrl":"https://...","longDescription":"The Core modules ","lessonsCount":10,"category":"BEGINNER"},{"id":2,"description":"Angular Ngrx ","iconUrl":"https://...","longDescription":"Store, Effects, Router Store, Ngrx Entity","lessonsCount":8,"category":"ADVANCED"}]