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

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

JavaScriptでは、JSON.parse()メソッドを使用することで、JSON形式のテキスト文字列をJavaScriptオブジェクトへと変換できます。このメソッドは、APIから取得したデータやサーバーとの通信で受け取ったJSON文字列を、プログラム内で扱いやすいオブジェクトにパースする際に非常に重要な役割を果たします。

以下は、JSONテキストをJavaScriptオブジェクトに変換する具体的なコード例です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JSON parse() メソッド</h1>
<div class="sample">
{"name":"Rohan", "sports":["Cricket","Football"], "country":"India"}
</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、JSON文字列がパースされます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let parsedJson = JSON.parse(sampleEle.innerHTML);
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML = "Name = " + parsedJson.name + "<br>";
        resultEle.innerHTML += "Country = " + parsedJson.country + "<br>";
        resultEle.innerHTML += "Sports = " + parsedJson.sports;
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

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

「CLICK HERE」ボタンをクリックすると、パースされたJSONオブジェクトから各プロパティの値が取り出され、以下のように画面に出力されます。

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

コードのポイント

  • JSON.parse()は引数として渡されたJSON文字列を解析し、対応するJavaScriptオブジェクトを返します。
  • 変換後のオブジェクトは、通常のオブジェクトと同じようにドット演算子（例：parsedJson.name）でプロパティにアクセスできます。
  • 配列型の値（この例では「sports」）もそのまま配列として扱うことが可能です。
  • なお、無効なJSON文字列を渡すとSyntaxErrorが発生するため、外部データを扱う場合はtry-catchによるエラー処理を組み合わせるのが安全です。
  1. 【初心者向け】JavaScriptでJSONオブジェクトを作成する方法をサンプルコード付きで解説

    JavaScriptでは、波括弧 { } を使ったオブジェクトリテラルを記述するだけで、JSON（JavaScript Object Notation）と同じ「キーと値のペア」構造を持つオブジェクトを簡単に作成できます。JSONは軽量なデータ交換フォーマットであり、API通信や設定ファイルなど、Web開発のさまざまな場面で利用されています。 以下は、JavaScriptでJSONオブジェクトを作成し、ボタンをクリックするとその内容を画面に表示するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="ja">

  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