1

次のJSONデータを手にしています。テーブルを作成する必要がありますが、データは動的です(行ヘッダーと列ヘッダーとセル値の両方)。

JSON 構造は次のとおりです。

{        
    "data": {
        "vertical_header": [
            "football",
            "hockey"
        ],
        "horizontal_header": [
            "China",
            "Brazil",
            "Australia"
        ],
        "researchDetails": [
            {
                "country": "brazil",
                "game": "hockey",
                "player": "Mr.r"
            },
            {
                "country": "china",
                "game": "hockey",
                "player": "Mr.X"
            },
            {
                "country": "china",
                "game": "football",
                "player": "Mr.Y"
            },
            {
                "country": "china",
                "game": "football",
                "player": "Mr.Z"
            },
            {
                "country": "brazil",
                "game": "football",
                "player": "Mr.M"
            },
            {
                "country": "brazil",
                "game": "football",
                "player": "Mr.E"
            }    
        ]
    }
}

以下はテーブル構造です。ハンドルバー テンプレートを使用して、このような動的テーブルを構築するには、このような JSON を解析する必要があります。ヘッダーも動的です。以下を構築できるように、配列 (2D/3D) を作成する必要があります。 

<html>
</body>
<table border="1">
        <tr><th/><th>hockey</th><th>football</th></tr>
        <tr><td rowspan="2">china</td><td>Mr.X</td><td>Mr.Y</td></tr>
        <tr><td></td><td>Mr.Z</td></tr>
        <tr><td rowspan="2">brazil</td><td>Mr.r</td><td>Mr.M</td></tr>
        <tr><td ></td><td>Mr.e</td></tr>
        <tr><td>Australia</td><td></td><td/></tr>
    </table>
</body>
</html
4

0 に答える 0