JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JSON文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

JavaScriptでは、JSON.parse()メソッドを使うことで、JSON文字列をJavaScriptのオブジェクトに変換できます。JSONをパースした後は、オブジェクトのプロパティとして、文字列内の各要素に自由にアクセスできるようになります。

構文

var obj = JSON.parse(JSON);

このメソッドは、引数に渡されたJSON文字列を解析（パース）してオブジェクトに変換します。戻り値を受け取った変数を通じて、元のJSONが持つデータへ簡単にアクセスできます。

例1：基本的な使い方

次の例では、変数にJSON文字列を代入し、JSON.parse()でオブジェクトに変換しています。その後、JSON内の各要素の値を出力として表示しています。

<html>
<body>
<script>
    var json = '{"name": "Malinga", "age": 32, "country": "srilanka"}';
    var obj = JSON.parse(json);
    document.write(obj.name + "</br>");
    document.write(obj.age + "</br>");
    document.write(obj.country);
</script>
</body>
</html>

出力結果

Malinga
32
srilanka

例2：別のJSONデータでの使用例

同じ手順は、さまざまな構造のJSON文字列にも適用できます。次の例では、会社情報を含むJSONをオブジェクトに変換し、各プロパティの値を表示しています。

<html>
<body>
<script>
    var json = '{"company": "Tutorialspoint", "Product": "Tutorix", "city": "Hyderabad"}';
    var obj = JSON.parse(json);
    document.write(obj.company + "</br>");
    document.write(obj.Product + "</br>");
    document.write(obj.city);
</script>
</body>
</html>

出力結果

Tutorialspoint
Tutorix
Hyderabad

補足：無効なJSONへの対処（エラー処理）

JSON.parse()に不正な形式の文字列を渡すと、SyntaxErrorが発生します。外部APIから取得したデータなど、内容が確実でないJSONを扱う場合は、try...catch文でエラー処理を行うのが安全です。

try {
    var obj = JSON.parse(json);
    console.log(obj.name);
} catch (e) {
    console.error("JSONの解析に失敗しました:", e.message);
}

このようにJSON.parse()を活用すれば、JSON文字列を簡単にJavaScriptオブジェクトへ変換でき、Webアプリケーションでのデータ処理が格段に行いやすくなります。

  1. JSONテキストをJavaScriptのJSONオブジェクトに変換する方法を解説

    JavaScriptでは、JSON.parse()メソッドを使用することで、JSON形式のテキスト文字列をJavaScriptオブジェクトへと変換できます。このメソッドは、APIから取得したデータやサーバーとの通信で受け取ったJSON文字列を、プログラム内で扱いやすいオブジェクトにパースする際に非常に重要な役割を果たします。 以下は、JSONテキストをJavaScriptオブジェクトに変換する具体的なコード例です。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /&

  2. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum