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

JavaScriptでJSONオブジェクトを解析する方法【初心者向けに解説】

JSON.parse()メソッドとは

JavaScriptでJSON形式の文字列（テキストデータ）をオブジェクトに変換するには、標準組み込みのJSON.parse()メソッドを使用します。このメソッドは、引数として渡されたJSON文字列を解析し、対応するJavaScriptオブジェクトを返します。

基本的な構文は以下の通りです。

JSON.parse(text[, reviver])
  • text：解析対象となるJSON形式の文字列
  • reviver（省略可能）：変換結果を加工するためのコールバック関数

サンプルコード

以下は、JSON.parse()を使ってJSONオブジェクトを解析する具体例です。イベント情報を含むJSON文字列を解析し、「start」「end」の日付文字列をDateオブジェクトに変換して出力します。

<!DOCTYPE html>
<html>
   <body>
      <script>
         // JSON文字列を解析してオブジェクトに変換
         var myData = JSON.parse('{"event1":{"title":"Employment period","start":"12\/29\/2011 10:20 ","end":"12\/15\/2013 00:00 "},"event2":{"title":"Employment period","start":"12\/14\/2011 10:20 ","end":"12\/18\/2013 00:00 "}}');

         var myArray = [];

         // 各イベントに対して処理を実行
         for (var e in myData) {
            var dataCopy = myData[e];
            for (var key in dataCopy) {
               if (key == "start" || key == "end") {
                  // 日付文字列をDateオブジェクトに変換
                  dataCopy[key] = new Date(dataCopy[key]);
               }
            }
            myArray.push(dataCopy);
         }

         // 結果をJSON文字列として表示
         document.write(JSON.stringify(myArray));
      </script>
   </body>
</html>

コードの解説

  1. JSON.parse()：JSON文字列をJavaScriptオブジェクトに変換します。
  2. for...inループ：オブジェクト内の各プロパティ（event1、event2）を順番に取り出します。
  3. 日付の変換：「start」「end」キーの値をnew Date()でDateオブジェクトに置き換えます。
  4. JSON.stringify()：処理結果の配列を再びJSON文字列に戻して画面に出力します。

reviver引数を使ったより簡潔な書き方

JSON.parse()の第2引数（reviver）を利用すると、解析と同時に値を変換できるため、コードをより簡潔にできます。

var jsonStr = '{"event1":{"title":"Employment period","start":"12\/29\/2011 10:20 ","end":"12\/15\/2013 00:00 "}}';

var myData = JSON.parse(jsonStr, function (key, value) {
   if (key === "start" || key === "end") {
      return new Date(value); // 日付を自動的にDateオブジェクトへ変換
   }
   return value;
});

エラー処理のポイント

不正な形式のJSON文字列を渡すと、JSON.parse()はSyntaxErrorをスローします。そのため、実際の開発ではtry...catch文で囲み、エラーに備えるのが安全です。

try {
   var obj = JSON.parse('不正なJSON文字列');
} catch (e) {
   console.error("JSONの解析に失敗しました：", e.message);
}

  1. 文字列を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

  2. iPhone / iOS（Swift）でJSONオブジェクトを解析する方法を徹底解説

    JSONとは？JSONは「JavaScript Object Notation」の略称で、軽量なデータ交換フォーマットとして広く利用されています。APIや各種Webサービスと連携する際、多くの場合データはJSON形式で返却されるため、それをSwiftなどの扱いやすい形式に変換する必要があります。JSONSerializationクラスによる解析iOSのFoundationフレームワークには、JSONをDictionary（辞書）、String、Boolなどのサポートされた型へ変換するためのJSONSerializationクラスが用意されています。このクラスが提供するjsonObject(wi