-3

HTMLテーブルとして表す必要がある.jsonファイルにjsonオブジェクトの配列があります。誰でもどうすればいいのか教えてください。test.json ファイルには次のようなデータがあります。

[{"Date":"2013/02/26"},{"Scn1":{"Avg":500 , "Count":5 , "Max":700}},{"Scn2":{"Avg":800 , "Count":6 , "Max":1000}},{"Scn3":{"Avg":500 , "Count":5 , "Max":700}}]

次のような HTML テーブルとして表す必要があります。

Date:_______

|Scenario | Avg value | Count | Max value |
|         |           |       |           |
|         |           |       |           |
|         |           |       |           |
4

1 に答える 1

0

これは非常に一般的な質問であり、コメント (および反対票) は正しいです。投稿する前に、試したことについてより多くの情報を提供する必要があります。でも幸せな気分なので…

そのデータは、ループするのにはかなり悪い形式です。少し調整する能力がある場合は、そうしてください。1 対多のものはすべて配列にする必要があります (1 つの日付には多くのシナリオがあります)。1 対 1 のものはすべて、同じオブジェクトのプロパティである必要があります (例: シナリオ名と平均)。データが「正しい」形式になったら、階層の各レベルにネストされたループが必要になります。2 つのレベル (日付とシナリオ) があるため、2 つのループがあります。それぞれが行を書き込みます。

次に、一般的な考え方は次のようになります。

var dataSet = [{"Date":"2013/02/26",
                scenarios: [
                  {name: "Scn1","Avg": 500,"Count": 5,"Max": 700},
                  {name: "Scn2","Avg": 800,"Count": 6,"Max": 1000},
                  {name: "Scn3","Avg":500,"Count":5,"Max":700}
                ]
              }];


(function draw(data) {
  var i, j;

    for (i = 0; i < data.length; i++) {
      $('#myTable').append('<tr><td colspan="4">' + data[i].Date + '</td></tr>');
      $('#myTable').append('<tr>');
      $('#myTable').append('<td>Scenario</td>');
      $('#myTable').append('<td>Average</td>');
      $('#myTable').append('<td>Count</td>');
      $('#myTable').append('<td>Max</td>');
      $('#myTable').append('</tr>');

      for (var j = 0; j < data[i].scenarios.length; j++) {
          $('#myTable').append('<tr>');
          $('#myTable').append('<td>' + data[i].scenarios[j].name + '</td>');
          $('#myTable').append('<td>' + data[i].scenarios[j].Avg + '</td>');
          $('#myTable').append('<td>' + data[i].scenarios[j].Count + '</td>');
          $('#myTable').append('<td>' + data[i].scenarios[j].Max + '</td>');
          $('#myTable').append('</tr>');
      }
    }
})(dataSet);

これは、jQuery を使用して要素を DOM に追加しています。これを行うためのライブラリとプラグインがあります。迅速な修正が必要な場合は、それらを見ることができます。JavaScript を初めて使用し、いつかエキスパートになりたい場合は、最初にオブジェクトのループとトラバースについて理解することをお勧めします。

これをすべて行うには、コードで test.json ファイルを使用できるようにする必要があることに注意してください。おそらくAJAXでこれを行うでしょう。これを読むことをお勧めします: https://developer.mozilla.org/en/docs/AJAX

これが実際のフィドルです: http://jsfiddle.net/ub587/2/

それが役立つことを願っています。

于 2013-07-29T22:22:36.263 に答える