如何基于JSON数据生成以各数组为独立列的HTML表格

现有一份从表格导出的嵌套JSON财务数据，需要在页面渲染为标准HTML表格。

• 已实现能力：可以正常从JSON中提取键值对，完成基础数据展示
• 现存问题：渲染逻辑为每个顶层JSON字段生成一整行，数据排列方向不符合要求
• 核心需求：每个独立的顶层JSON字段对应表格的一列，按行索引对齐不同列的数据

两种渲染效果的差异：

1. 当前渲染效果：列数和JSON顶层字段数一致，每个字段的所有键值对纵向铺开成一行，项目名称和数值被分散到不同行，无法对应
2. 目标渲染效果：第一列为资产/负债类项目名称，后续每列对应不同统计维度的数值，行和项目一一对应

现有实现代码 #

views.py #

def test_fin(request):
    data_test = json.loads(json_bss_test)
    test_data = []
    test_1 = data_test['Assets']
    test_2 = data_test['Unnamed: 1']
    test_3 = data_test['Unnamed: 2']
    test_4 = data_test['Unnamed: 3']
    test_5 = data_test['Unnamed: 4']
    test_6 = data_test['Unnamed: 5']

    test_data.append(test_1)
    test_data.append(test_2)
    test_data.append(test_3)
    test_data.append(test_4)
    test_data.append(test_5)
    test_data.append(test_6)

    table_headers = []
    column_1_bss_header = data_bss_header["Unnamed: 1"]
    column_2_bss_header = data_bss_header["Unnamed: 2"]
    column_3_bss_header = data_bss_header["Unnamed: 3"]
    column_4_bss_header = data_bss_header["Unnamed: 4"]
    column_5_bss_header = data_bss_header["Unnamed: 5"]

    for i in range(0, 1):
        table_headers = [column_1_bss_header, column_2_bss_header, column_3_bss_header,
                         column_4_bss_header, column_5_bss_header]
    context = {
        'test_data': test_data,
        'table_headers': table_headers,
    }
    return render(request, 'fin_test.html', context)

fin_test.html #

<table id="basic-datatables" class="display table table-bordered">
   <thead style="background-color: #d9f6ef">
      <th>in Millions USD</th>
      {% for data in table_headers %}
      {% for x,y in data.items %}
      <th>{{ y }}</th>
      {% endfor %}
      {% endfor %}
   </thead>
   <tbody>
      {%  for data in test_data %}
      <tr>
         {% for k,v in data.items %}
         <td>{{ v }}</td>
         {% endfor %}
      </tr>
      {% endfor %}
   </tbody>
</table>

样例JSON数据结构 #

{
  "Assets": {
    "0": "Current Assests",
    "1": "Cash and cash equivalents",
    "2": "Inventories",
    "3": "Trade receivables (Notes and accounts receivable)",
    "4": "Total Current Assets",
    "5": "Non-Current Assets",
    "6": "Property, Plant, and Equipment (Net)",
    "7": "Intangible Assets and Goodwill",
    "8": "Total Non-Current Assets",
    "9": "Total Assets",
    "10": "Liabilities and Stockholders ’ Equity",
    "11": "Current Liabilities",
    "12": "Short-term financial debt (Short-term borrowings/Bank loans/Overdraft)",
    "13": "Current portion of long - term debt",
    "14": "Trade Payables (Notes and accounts payable)",
    "15": "Total Curent Liabilities",
    "16": "Non-Current Liabilities",
    "17": "Long - term financial debt",
    "18": "Total Liabilities",
    "19": "Stockholder's Equity",
    "20": "Equity/Net Worth (Stockholders ’ Equity)",
    "21": "Total liabilities and stockholders ’ equity",
    "22": null,
    "23": "Retained Profits/Reserves/Provisions",
    "24": "Depreciation and Amortization",
    "25": "Asset = Total Liabilities + Equity",
    "26": "Tangible Net Worth"
  },
  "Unnamed: 1": {
    "0": null,
    "1": 23879229.26,
    "2": 35985658.17,
    "3": 67058822.84,
    "4": 279279820.23,
    "5": null,
    "6": 28179061.26,
    "7": 19565189.57,
    "8": 50587177.82,
    "9": 329866998.05,
    "10": null,
    "11": null,
    "12": 36492709.23,
    "13": null,
    "14": 44464953.26,
    "15": 199317160.36,
    "16": null,
    "17": 49154190.77,
    "18": 262995839.31,
    "19": null,
    "20": 66871158.74,
    "21": 329866998.05,
    "22": null,
    "23": 7803718.05,
    "24": 21973498.18,
    "25": 1.0,
    "26": 47305969.17
  },
  "Unnamed: 2": {
    "0": null,
    "1": 48090267.32,
    "2": 22077626.89,
    "3": 40592268.16,
    "4": 196722868.47,
    "5": null,
    "6": 14578271.51,
    "7": 18660848.52,
    "8": 35873515.12,
    "9": 232596383.59,
    "10": null,
    "11": null,
    "12": 21192290.38,
    "13": null,
    "14": 84756913.09,
    "15": 149917365.99,
    "16": null,
    "17": 19875299.55,
    "18": 169792665.54000002,
    "19": null,
    "20": 62803718.05,
    "21": 232596383.59,
    "22": null,
    "23": 31537486.52,
    "24": 18154261.78,
    "25": 1.0,
    "26": 44142869.53
  },
  "Unnamed: 3": {
    "0": null,
    "1": -0.503449854,
    "2": 0.6299604278,
    "3": 0.6520097516,
    "4": 0.4196611833,
    "5": null,
    "6": 0.9329494063,
    "7": 0.0484619469,
    "8": 0.4101539158,
    "9": 0.4181948703,
    "10": null,
    "11": null,
    "12": 0.7219804266,
    "13": 0.0,
    "14": -0.4753825778,
    "15": 0.3295134893,
    "16": null,
    "17": 1.4731295569,
    "18": 0.5489234383,
    "19": null,
    "20": 0.0647643295,
    "21": 0.4181948703,
    "22": null,
    "23": -0.7525573877,
    "24": 0.2103768496,
    "25": null,
    "26": 0.0716559588
  },
  "Unnamed: 4": {
    "0": null,
    "1": 0.0723904768,
    "2": 0.1090914168,
    "3": 0.2032904875,
    "4": 0.8466437136,
    "5": null,
    "6": 0.0854255243,
    "7": 0.0593123583,
    "8": 0.1533562864,
    "9": 1.0,
    "10": null,
    "11": null,
    "12": 0.1106285547,
    "13": 0.0,
    "14": 0.1347966105,
    "15": 0.6042349236,
    "16": null,
    "17": 0.1490121505,
    "18": 0.7972784209,
    "19": null,
    "20": 0.2027215791,
    "21": 1.0,
    "22": null,
    "23": 0.0236571651,
    "24": 0.0666132057,
    "25": null,
    "26": null
  },
  "Unnamed: 5": {
    "0": null,
    "1": 0.2067541489,
    "2": 0.0949181864,
    "3": 0.1745180537,
    "4": 0.8457692481,
    "5": null,
    "6": 0.0626762604,
    "7": 0.0802284551,
    "8": 0.1542307519,
    "9": 1.0,
    "10": null,
    "11": null,
    "12": 0.0911118653,
    "13": 0.0,
    "14": 0.3643948018,
    "15": 0.6445386797,
    "16": null,
    "17": 0.0854497359,
    "18": 0.7299884156,
    "19": null,
    "20": 0.2700115844,
    "21": 1.0,
    "22": null,
    "23": 0.1355888945,
    "24": 0.0780504903,
    "25": null,
    "26": null
  }
}

内容的提问来源于stack exchange，提问作者edche