CODEWITHSUNDEEP
pythonjsondjango
edche
edche

Reputation: 680

How to display Json items in Django templates?

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.

Upvotes: 0

Views: 2665

Answers (1)

AKX
AKX

Reputation: 168976

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>

Upvotes: 1

Related Questions