Как получить список данных json словаря и показать его на html-странице в виде таблицы

У меня есть два столбца данных. Один - "Код GLI", а другой - "Страна".

Мне нужно установить данные "Код GLI" в столбце "Код GLI". Данные "Страна" в столбце "Страна". Вот мои данные в формате списка словаря.

просматривает файл:

def tables_data(request):
    dbfs_source_file_path = 'dbfs:/mnt/adls/MPF/Alternate_Currency_Keys_Aug.csv'
    local_file_download_path = './mpf_dataset.csv'
    dbfs_api  = DbfsApi(api_client)
    dbfs_path = DbfsPath(dbfs_source_file_path)
    dbfs_api.get_file(dbfs_path, local_file_download_path, overwrite = True)
    df = pd.read_csv(local_file_download_path).head(5)
    json_records = df.reset_index().to_json(orient ='records')
    data = []
    data = json.loads(json_records)
    return render(request, "home/tables-data.html", {'data':data})

вывод данных: 

[{'index': 0, 'GLI Code': '15013256_U', 'Country': 'Indonesia', }, 
{'index': 1, 'GLI Code': '20061265_U', 'Country': 'Philippines'}, 
{'index': 2, 'GLI Code': '20063869_U', 'Country': 'Indonesia'}]

html файл:

 
  <thead> 
  <tr>
    {% for i in data %}
    <th>{{i}}</th>
    {% endfor %}
  </tr>
  </thead>
  <tbody>
  <tr>  
    {% for g in data.GLICode %}
    <td>{{g}}</td>
    {% endfor %} 
  </tr>
  <tr>  
    {% for c in data.Country %}
    <td>{{c}}</td>
    {% endfor %} 
  </tr>
  </tbody>

Вышеприведенный html-код не дает мне ожидаемого результата, как показано на скриншоте ниже.

Я хочу установить данные в формате, представленном ниже на скриншоте.

enter image description here

Я думаю, что будет лучше использовать ajax запрос Вместо этого, пожалуйста Посетите: https://www.google.com/amp/s/www.geeksforgeeks.org/handling-ajax-request-in-django/amp/

Но основная проблема с вашим кодом в том, что вы пытаетесь получить ключ в HTML, что не совсем корректно, вы можете посмотреть пример Visit: https://www.appsloveworld.com/django/100/431/how-to-display-json-items-in-django-templates

Сделать что-то вроде этого будет работать, но! нужно убрать пробел из 'GLI Code' в данных... Использование ключей словаря с пробелами в шаблонах кажется огромной головной болью (дополнительные пользовательские теги шаблона + прочее) - можно сделать, не рекомендую

<table> 
  <thead>
    <tr>
      <th></th>
      <th>GLI Code</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    {% for i in data %}
      <tr>
        <th>{{i.index}}</th>
        <th>{{i.GLICode}}</th>
        <th>{{i.Country}}</th>
      </tr>
    {% endfor %}
  </tbody>
</table>
Вернуться на верх