TECH I.S.

JSON.parse()


JSONの一般的な用途は、Webサーバーとの間でデータを交換することです。

Webサーバーからデータを受信する場合、データは常に文字列です。

JSON.parse()でデータを解析すると、データはJavaScriptオブジェクトになります。

例 - JSONの解析

Webサーバーから次のテキストを受け取ったとします。

'{"name":"John", "age":30, "city":"New York"}'

JavaScript関数を使用するJSON.parse()テキストをJavaScriptオブジェクトに変換します。

:::example {.techis-example}

:::code {.techis-code .notranslate .language-javascript}
const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
:::code
:::example.


テキストが JSON 形式であることを確認してください。そうしないと、構文エラーが発生します。


ページでJavaScriptオブジェクトを使用します。

<p id="demo"></p> <script> document.getElementById("demo").innerHTML = obj.name; </script>

自分で試してみる»


JSONとしての配列

JSON.parse()配列から派生したJSONでを使用すると、メソッドはJavaScriptオブジェクトではなくJavaScript配列を返します。

const text = '["Ford", "BMW", "Audi", "Fiat"]'; const myArr = JSON.parse(text);

自分で試してみる»


例外

日付の解析

日付オブジェクトは、JSONでは許可されていません。

日付を含める必要がある場合は、文字列として記述します。

後で日付オブジェクトに戻すことができます。

文字列を日付に変換します。

const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}'; const obj = JSON.parse(text); obj.birth = new Date(obj.birth); document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

自分で試してみる»

または、JSON.parse()関数の2番目のパラメーターであるreviverを使用することもできます。

reviverパラメーターは、値を返す前に各プロパティをチェックする関数です。

reviver関数を使用して、文字列を日付に変換します。

const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}'; const obj = JSON.parse(text, function (key, value) {   if (key == "birth") {     return new Date(value);   } else {     return value;   } }); document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

自分で試してみる»

解析関数

関数はJSONでは使用できません。

関数を含める必要がある場合は、文字列として記述します。

後で関数に戻すことができます。

文字列を関数に変換します。

const text = '{"name":"John", "age":"function () {return 30;}", "city":"New York"}'; const obj = JSON.parse(text); obj.age = eval("(" + obj.age + ")"); document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

自分で試してみる»

eval()JSONで関数を使用することは避けてください。関数はスコープを失うため、関数を関数に戻すためにを使用する必要があります。


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細