How does one display a list in Django + JavaScript element by element?

Question

To start, the version of my problem I'm presenting here is simplified to make my question clearer. Let's say I want to make a Django web app, which takes some data from user, runs some Python logic and returns a list of objects.

An object has 2 values, I want to display the values of each list member one by one, moving on to the next object after X seconds or after the user presses the button.

I understand that I'll probably have to get JavaScript involved...I'm really a newbie to JS and I was wondering whether you faced a similar issue and have some useful links or advice.

Thanks in advance :)

lucutzu33 · Accepted Answer · 2021-05-12 16:27:43Z

1

Have a Django view return a JsonResponse containing your list.

def json_returning_view(request):
    ....
    return JsonResponse(data)

You can then use fetch() to get the data, decode it, then display it one by one.

fetch('<your Django endpoint>')
  .then(response => response.json())
  .then(data => data.forEach(item => setInterval(displayItemFunction(), <time in ms>)));

answered May 12, 2021 at 16:27

lucutzu33

3,7651 gold badge14 silver badges26 bronze badges

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

Comments

Joe Johnson · Accepted Answer · 2021-05-12 16:28:26Z

1

I found this tutorial especially useful for integrating Django + JS (either just plain JS, or a frontend framework like React).

https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-django-react/#the-demo-of-what-well-be-building

Particularly useful would be the 'passing data from the backend to the frontend' sections. You can load the python object as a JSON in your Django template, which can then be manipulated with JS (loading a simple JS script within <script> tags) to display whatever you require. The link above should make it clear but feel free to let me know if something was unclear.

answered May 12, 2021 at 16:28

Joe Johnson

884 bronze badges

Collectives™ on Stack Overflow

How does one display a list in Django + JavaScript element by element?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related