1. ホーム
  2. javascript

JSON文字列からJSオブジェクトへ

2023-07-31 14:15:19

質問

Googleビジュアライゼーションでグラフを作成するためにJSオブジェクトを使用しています。データソースを設計しようとしています。まず、クライアントサイドでJSオブジェクトを作成しました。

var JSONObject = {
  cols: [{
      id: 'date',
      label: 'Date',
      type: 'date'
    },
    {
      id: 'soldpencils',
      label: 'Sold Pencils',
      type: 'number'
    },
    {
      id: 'soldpens',
      label: 'Sold Pens',
      type: 'number'
    }
  ],
  rows: [{
      c: [{
        v: new Date(2008, 1, 1),
        f: '2/1/2008'
      }, {
        v: 30000
      }, {
        v: 40645
      }]
    },
    {
      c: [{
        v: new Date(2008, 1, 2),
        f: '2/2/2008'
      }, {
        v: 14045
      }, {
        v: 20374
      }]
    },
    {
      c: [{
        v: new Date(2008, 1, 3),
        f: '2/3/2008'
      }, {
        v: 55022
      }, {
        v: 50766
      }]
    }
  ]
};

var data = new google.visualization.DataTable(JSONObject, 0.5);

さて、私はデータを動的に取得する必要があります。そこで、JSON文字列を返すページにAJAXリクエストを送信しています。

 "cols: [{id: 'date', label: 'Date', type: 'date'},
{id: 'soldpencils', label: 'Sold Pencils', type: 'number'},
{id: 'soldpens', label: 'Sold Pens', type: 'number'}],
  rows: [{c:[{v: new Date(2008,1,1),f:'2/1/2008'},{v: 30000}, {v: 40645}]},
      {c:[{v: new Date(2008,1,2),f:'2/2/2008'},{v: 14045}, {v: 20374}]},
{c:[{v: new Date(2008,1,3),f:'2/3/2008'},{v: 55022}, {v: 50766}]}"

これを変数に保存しています。

var var1 = "cols: [{i ....... 66}]}"

と表示し

alert(var1);

さて、私の仕事はこの文字列からJSオブジェクトを作成することです。これはうまくいきません。JSオブジェクトを使用すると、すべてが正常に動作し、必要なグラフを取得することができます。今、私がアラートメッセージから確認したAJAXリクエストからの文字列の同じ値をnオブジェクトに入れようとすると、オブジェクトは正しく作成されません。ご意見、修正、アドバイスなどありましたら教えてください。

どのように解決するのですか?

最近のブラウザには、JSON をネイティブなオブジェクトにパースするためのサポートがあるものがあります。

var var1 = '{"cols": [{"i" ....... 66}]}';
var result = JSON.parse(var1);

対応していないブラウザのために、json2.jsは以下からダウンロードできます。 json.org からダウンロードして、JSON オブジェクトを安全にパースすることができます。 このスクリプトはネイティブのJSONサポートをチェックし、それが存在しない場合は、代わりにJSONグローバルオブジェクトを提供します。 より高速でネイティブなオブジェクトが利用可能な場合は、それをそのまま残してスクリプトを終了します。 しかし、有効な JSON を提供しなければなりません。さもなければエラーが発生します。 http://jslint.com または http://jsonlint.com .