Django: how to loop through nested Json object in html

Question

I am new to json, and I have a nested json object called jresult in django view.py. I passed this object to html and I wanna display it in html.

in view.py:

return render(request,'home.html', {'jresult': jresult})

jresult:

{
  "company": "xxx", 
  "address": "xxx", 
  "ceo": "xxx,
  "employee": {
      "Emily": {
        "id": "xxx", 
        "gender": "xxx"
      }, 
      "Tom": {
        "id": "xxx", 
        "gender": "xxx"
      }, 
      "Alex": {
        "id": "xxx", 
        "gender": "xxx"
      }, 
    },  
}

So far I can only loop through the employee's name and display them in the html page: Emily, Tom and Alex by the following html code:

{% for obj in jresult.employee %}
    <p>{{obj}}</p>
{% endfor %}

how can I access the id and gender as well, I have tried

{% for obj in jresult.employee %}
    <p>{{obj}}</p>
    {% for item in jresult.employee.obj.gender %}
        <p>{{item}}</p>
        {% endfor %}
{% endfor %}

but it doesn't work. Any helps will be appreciated.

Looks like django. You'll have better luck if you alter your question and tags to include the templating you're using that interprets that syntax. — Andy Foster
– Andy Foster, Commented Jul 30, 2018 at 20:14
It can or Jinja (django's template engine) or Twig (php template engine) that is almost equal to Jinja, you have to specify which one is — Norman
– Norman, Commented Jul 30, 2018 at 20:17
@Norman Yes. It is a django question. I forgot to specify it. Sorry — Luke
– Luke, Commented Jul 30, 2018 at 20:28

zubhav · Accepted Answer · 2018-07-30 20:59:31Z

2

JSON is a nested structure so you should be able to access attributes of relative objects using a simple dot notation. You must have the employee field as an array, not an object, if you want to iterate through them like so:

Try this:

{% for obj in jresult.employee %}
   <p>{{obj}}</p>
   <p>{{obj.id}}</p>
   <p>{{obj.gender}}</p>
{% endfor %}

edited Jul 30, 2018 at 20:59

answered Jul 30, 2018 at 20:38

zubhav

1,5691 gold badge13 silver badges19 bronze badges

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

3 Comments

Luke Over a year ago

thank you, but it only shows the employee's name, not id and gender

zubhav Over a year ago

Ah sorry, I've just realised employee is an object and not an array. That is where your problem lies. You cannot iterate through an object full of objects. But you can iterate through an array of objects.

wdfc Over a year ago

@zubhav, Please see my answer, you can definitely iterate through an object full of objects :). The JSON object should be treated as a python dictionary. Please see docs.djangoproject.com/en/2.0/ref/templates/builtins/#for

Norman · Accepted Answer · 2018-07-30 20:40:54Z

1

Take a look at this (similar request) or (if it don't work) you can implement your own filter to transform the json in the desired form

Edit: Basically you can try

{{ jresult['employee'] }}

because as cited in the first link, you have dictionaries in the json

answered Jul 30, 2018 at 20:40

Norman

5056 silver badges15 bronze badges

2 Comments

Luke Over a year ago

I checked it out, but my case is there is not a attribute name for Alex, Tom and Emily. I don't know how to access them

Norman Over a year ago

in the jresult i can't see an attribute 'name' for the employees, their names are the keys, you can convert the "employee" field to a list of dicts where each dict in the list represents an employee (so you can cycle over the list) and in each dict you can add the "name" attribute

wdfc · Accepted Answer · 2018-07-31 00:41:15Z

1

You can do {{ jresult['employee']['Emily'] }} and then use dot notation to print the remaining {{ jresult['employee']['Emily'].gender }} That should print the gender if I am not mistaken. However this is not maintainable as it requires you to know the names of each key before printing.

Django templates should allow you to do something like this, as json should be treated as python dictionary.

{% for employee_key, employee_value in jresult.employee %}
    <p>{{employee_key}}:{{employee_value}}</p>
{% endfor %}

Reference: https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#for

Asides from this - I would probably just write a serializer/transformer to change this data into template readable before sending it to the front-end.

Hope this helps!

edited Jul 31, 2018 at 0:41

answered Jul 31, 2018 at 0:31

wdfc

3744 silver badges9 bronze badges

Collectives™ on Stack Overflow

Django: how to loop through nested Json object in html

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related