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

Siddharth Swami 2021年11月20日

JavaScript JavaScript JSON JSON Object

JSON は、データを保存および転送するための軽量でテキストベースの言語です。JSON は、オブジェクトと配列の 2つの構造化タイプを表します。これは JavaScript オブジェクトに基づいており、JavaScript ObjectNotation の略です。JSON は、主に Web との間のデータ交換で使用されます。

このチュートリアルでは、JSON 文字列を安全にオブジェクトに変換する方法を示します。

データは、数値または日付のいずれかの文字列の形式でサーバーから受信されます。したがって、ファイルを実行するには、データをオブジェクトに変更する必要があります。JavaScript オブジェクトになるデータを解析するために使用される JavaScript の JSON.parse() と呼ばれる関数があります。この関数は、サーバーから提供された完全なテキストを解析してから、それをオブジェクトに変更します。

次のコードは、JSON.parse() 関数の使用法を示しています。

<!DOCTYPE html>
<html>
<body>
<p id="example"></p>

<script>
const text = '{"name":"ram", "age":22, "city":"New Delhi"}'
const object = JSON.parse(text);
document.getElementById("example").innerHTML = object.name + ", " + object.age;
</script>

</body>
</html>

出力：

ram, 22

上記の例では、名前と人が住んでいる都市で構成される JSON テキストがあり、そのオブジェクトを作成して解析されます。次に、getElementById() 関数を使用して、必要な値を取得できます。

JSON.parse() を使用する別の方法は、JavaScript で let() 関数を使用することです。ここでは、最初に変数に割り当ててから解析することなく、テキストを直接解析できます。

次のコードを参照してください。

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
    
let json_Object = JSON.parse('{"name":"ram", "age":22, "city":"New Delhi"}');
document.getElementById("example").innerHTML = json_Object.name + ", " + json_Object.age;

</script>
</body>
</html>

出力：

ram, 22

JSON では、日付オブジェクトは許可されていません。そのため、JSON で文字列として記述し、Date() 関数を使用して日付オブジェクトに変換し直す必要があります。

例えば、

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
    
const text1 = '{"name":"ram", "birth":"2000-03-05", "city":"New Delhi"}';
const object = JSON.parse(text1);
object.birth = new Date(object.birth);
document.getElementById("example").innerHTML = object.birth; 
</script>

</body>
</html>

出力：

Sun Mar 05 2000 05:30:00 GMT+0530(India Standard Time)

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

関連記事 - JavaScript JSON

関連記事 - JSON Object