1

次のようなデータセットがあります

{
"columns": [
  {
    "name": "COLUMN1",
    "code": "c1"
  },
  {
    "name": "COLUMN2",
    "code": "c2"
  },
  {
    "name": "COLUMN3",
    "code": "c3"
  },
  {
    "name": "COLUMN4",
    "code": "c4"
  }
],
"rows": [
  {
    "c1": 387,
    "c2": 347.618,
    "c3": 0,
    "c4": 39.282,
  },
  {
    "c1": 390,
    "c2": 3457.618,
    "c3": 0,
    "c4": 40.282
  },
        {
    "c1": 387,
    "c2": 3447.618,
    "c3": 0,
    "c4": 39.282
  },
        {
    "c2":10,
    "c3": 0,
    "c4": 39.282
  },
        {
    "c1": 387,
    "c2": 347.618,
    "c4": 100
  }
]
}

列の長さと行の長さが固定されていません。column.name 行の値は列コードを介してアクセスできる必要があるため、テーブルヘッダーを含むテーブルをレンダリングしたいと考えています。(列 COLUMN1 の場合と同様に、各行の値は row.c1 にする必要があります)。

SOに関する多くの回答とjsrenderに関するいくつかのドキュメントを組み合わせて、次のような解決策を考え出しました:

<html>
<body>
<table>
    <thead>
        <tr>
            {{for columns}}
                <th class="right">{{:name}}</th>
            {{/for}}

        </tr>
    </thead>

    <tbody>
        {{for rows}}
            <tr>
                {{for columns ~data=#data}}
                    {{props #data}}
                        {{if key == "code"}}
                            <td class="right">{{:~data[prop]}}</td>
                        {{/if}}
                    {{/props}}
                {{/for}}
            </tr>
        {{/for}}
    </tbody>
</table>
</body>
</html>

誰でもこれを行うためのより良いアプローチを教えてもらえますか? 列配列と行配列の間の唯一のマッピングは、コード フィールドです。さらに情報が必要な場合はコメントしてください。

PS: データ構造をまったく変更できません。

4

1 に答える 1