How to display Json items in Django templates?

Question

I want to display my Json data in a table form. But when I try, it looks same with json format.

my data

[
    {
        "Financial Ratios": "Ratios",
        "Unnamed: 1": "Formula ",
        "Unnamed: 2": "2013",
        "Unnamed: 3": 2012.0,
        "Unnamed: 4": "Point",
        "Unnamed: 5": "Max Score for the Ratio",
        "Unnamed: 6": "Weighted Score",
    },
    {
        "Financial Ratios": "Activity Ratios",
        "Unnamed: 1": None,
        "Unnamed: 2": None,
        "Unnamed: 3": None,
        "Unnamed: 4": None,
        "Unnamed: 5": None,
        "Unnamed: 6": None,
    },
    {"Financial Ratios": "Total Asset Turnover Ratio", "Unnamed: 1": "..."},
]

views.py

def test_view(request):
    # Financial Ratios
    fr = pd.read_excel('media/test.xlsx', usecols='A:G', skiprows=lambda x: x < 0 or x > 42, sheet_name='Scoring')
    json_fr = fr.to_json()
    ...
    data = json.loads(json_fr)

    index_key_mapping = {index: key for index, key in enumerate(data.keys())}
    formated_data = [{
        index_key_mapping[index]: value for index, value in enumerate(ord_pair)
    } for ord_pair in zip(*[
        dictionary.values() for key, dictionary in data.items()
    ])]
    context = {
        'formated_data': formated_data,
    }
return render(request, 'json_test.html', context)

template.html

{% for item in formated_data %}

    <li> {{ item }} </li>

{% endfor %}

For example, I want "Financial Ratios" to be a column name and "Ratios" and "Activity Ratios" in the data to be the elements (td) of this column but I don't know how to handle data and access this data content. My currently output in html doc is:

{'Financial Ratios': 'Ratios', 'Unnamed: 1': 'Formula ', 'Unnamed: 2': '2013', 'Unnamed: 3': 2012.0, 'Unnamed: 4': 'Point', 'Unnamed: 5': 'Max Score for the Ratio', 'Unnamed: 6': 'Weighted Score'}
{'Financial Ratios': 'Activity Ratios', 'Unnamed: 1': None, 'Unnamed: 2': None, 'Unnamed: 3': None, 'Unnamed: 4': None, 'Unnamed: 5': None, 'Unnamed: 6': None} ...

Note: This is my test page. The data will come to me as API, but API will be in this format so I want to try handle data in this way. Because in API's there are several different data and this is just an example.

You're... reading an excel file into a dataframe, dumping that data frame to JSON, loading that JSON back... What about just pd.to_html()..? — AKX
– AKX, Commented Apr 15, 2021 at 11:28
Actually this is my test page. The data will come to me as API, but API will be in this format so I want to try handle data in this way. Because in API's there are several different data and this is just an example. — edche
– edche, Commented Apr 15, 2021 at 11:31

AKX · Accepted Answer · 2021-04-15 11:39:38Z

1

Okay, so you'll want a tabular view of a list-of-dicts? You'll first need to know all the keys (columns):

def test_view(request):
    data = ...
    keys = set()
    for item in data:
        keys.update(set(item))  # gather up all keys
    key_order = sorted(keys)  # or whichever order you like

    context = {
        "data": data,
        "key_order": key_order,
    }
    return render(request, 'json_test.html', context)

Then do something like this in your template...

<table>
    <thead>
        <tr>
            {% for key in key_order %}
            <th>{{ key }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for item in data %}
        <tr>
            {% for key in key_order %}
            <td>{{ item.get(key) }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>

answered Apr 15, 2021 at 11:39

AKX

171k16 gold badges148 silver badges230 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

edche Over a year ago

Firstly thank you very much for your help but I got this output now: 1 2 3 4 5 6 : F R U a c d e i l m n o s t

AKX Over a year ago

That sounds like data is not actually a list of dicts, but maybe a dict itself.

Collectives™ on Stack Overflow

How to display Json items in Django templates?

my data

views.py

template.html

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

my data

views.py

template.html

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related