JavaScriptのJSONオブジェクト parse() メソッドの使い方メソッドについて記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。
JavaScriptのJSONオブジェクトとは？
JavaScript Object Notation (JSON) は、JavaScript のオブジェクト構文に基づいた、構造化されたデータを表現するための標準的なテキストベースのフォーマットです。
JSON はウェブアプリケーションのデータ転送によく使われます (たとえば、あるデータをAPIサーバーからクライアントに送信して、APIウェブページに表示したり、その逆に表示をしたりします)。
JavaScriptのJSON型を理解し、JSONのデータを解析、分析できるようになれば、Webデータを容易に解析できることが可能となります。
ウェブ上のデータは現在ほぼJSONで扱われているといっても過言ではないくらい重要なデータ型となっています。
それでは、次に本題の説明に移ります。
JavaScriptのJSONオブジェクト parse() メソッドの使い方概要
JSONオブジェクトのparse()メソッドは、文字列をJSONオブジェクトに変換するために使用されます。
構文、使い方
構文:
|
1 |
JSON.parse(text[, reviver]) |
使い方:
JSON.parse() メソッドは、文字列を JSON オブジェクトに変換します。
引数 text には、変換したい文字列を指定します。オプション引数 reviver には、変換後のオブジェクトを変更するための関数を指定することができます。
引数について
引数として、変換したい文字列を渡します。
返り値について
parse() メソッドは、文字列を JavaScript のオブジェクトに変換するために使用されます。
返り値は、文字列が正しくパースされた場合は JavaScript のオブジェクト、そうでない場合は SyntaxError オブジェクトです。
このメソッドを利用した便利なテクニック
JSONオブジェクトのparse()メソッドを使うと、文字列をJSONオブジェクトに変換することができます。
そのため、文字列をJSONオブジェクトとして扱いたい場合は、parse()メソッドを使うと便利です。
現場で実際にどのように使われているか
JSONオブジェクトのparse()メソッドは、文字列をJSONオブジェクトに変換するために使用されます。
例えば、Webサーバーから取得したJSON文字列をJavaScriptのオブジェクトに変換するために使用されます。
以下のコードは、JSON文字列をオブジェクトに変換する例です。
|
1 2 3 4 5 6 7 8 |
// JSON文字列 let jsonString = '{""name"":""John"",""age"":30}'; // JSON文字列をオブジェクトに変換 let user = JSON.parse(jsonString); // userオブジェクトを使用 console.log(user.name); // John |
JavaScriptのJSONオブジェクト parse() メソッドの使い方と一緒によく使われる処理
JSONオブジェクトのparse()メソッドは、JSON文字列をJavaScriptオブジェクトに変換するために使用されます。
よく使われる処理として、Ajaxリクエストで取得したJSON文字列をJavaScriptオブジェクトに変換する処理があります。
なぜなら、Ajaxリクエストで取得したJSON文字列は、JavaScriptオブジェクトとして扱うことができないためです。
使用する上での注意点
-JSON文字列を正しくパースするためには、文字列が正しいJSONフォーマットであることを確認する必要があります。
-JSON文字列に含まれる文字列は、必ずクォートで囲む必要があります。
-JSON文字列の最後には、必ずカンマを付けないように注意してください。
JavaScriptのJSONオブジェクト parse() メソッドの使い方と似た処理のJSメソッド、違い
stringify() メソッドと似ていますが、下記の違いがあります。
- parse() メソッドとは逆の動作をします。
- stringify() メソッドは、JavaScript のオブジェクトを文字列に変換します。
JSONオブジェクトの他メソッドとしてstringify() メソッドも良く使われています。
下記に記事にしていますので、気になる方は確認してみてください。
JavaScriptのJSONオブジェクト parse() メソッドの使い方を使ったサンプルコードの紹介
JSONオブジェクト parse() メソッドの使い方のサンプルコード1
|
1 2 3 |
const jsonString = '{""name"":""John"",""age"":30,""city"":""New York""}'; const jsonObj = JSON.parse(jsonString); console.log(jsonObj); |
JSONオブジェクト parse() メソッドの使い方のサンプルコード2
|
1 2 3 |
const jsonString = '{""name"":""John"",""age"":30,""city"":""New York""}'; const jsonObj = JSON.parse(jsonString); console.log(jsonObj.name); |
JSONオブジェクト parse() メソッドの使い方のサンプルコード3
|
1 2 3 |
const jsonString = '{""name"":""John"",""age"":30,""city"":""New York""}'; const jsonObj = JSON.parse(jsonString); console.log(jsonObj.age); |
JSONオブジェクトのparseメソッド公式ドキュメント
また、JavaScriptの公式ドキュメントであるMDNで記載されているJSONオブジェクトのparseメソッドについても補足としてリンクを貼っておきます。参考にしてみてください。
