Loop through array items in Django

In this tutorial, we will learn how to loop through array items in Django. You might have implemented loop through objects in Django to iterate over object items.

Let’s discuss the syntax first-

{% for i in items %}

{% endfor %}

If you are a Django user, you might have used it at least once to iterate over items.

We will complete this task by following the below steps-

  1. Define URL to navigate into the view.
  2. Create an array inside function and pass it as a dictionary to index.html
  3. Render the HTML page.

So before you proceed you have to create a project and an app to iterate over array items.

Start by creating a project using –django-admin startproject project

Next, move into the project and start an app using- python manage.py startapp app

Define URL to navigate

The very first step in this tutorial is to define the path or the way to navigate into the function for the assigned task. Before defining the path, we need to import views from our app. So let’s import views as from app import views

Next, define the path path("",views.loop_array),

This line means that whenever we will start the server at the localhost, it will take us to the function in views named loop_array.

urls.py file-

from django.contrib import admin
from django.urls import path
from app import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path("",views.loop_array),
]

Create a function

As discussed in the above section, it will take us to the function loop-array in views.py, but have no function named as loop_array in views.py yet. You guessed it right, we will define a function named so. Without any further delay, let’s define a function where we will initialize array elements and pass them as arguments, also render the HTML page.

The code under views.py is as follows-

from django.shortcuts import render
def loop_array(request):
    arr=['C','O','D','E','S','P','E','E','D','Y']
    
    return render(request,"index.html",{'arr':arr})

This function has initialized array and then it renders index.html with the arguments as arr.

Iterate over the items in Django

The array created above has 10 characters to iterate over. We already have discussed the syntax at the beginning of this tutorial, now its time to implement that syntax and get it on the output screen. Create a directory named as templates under your app, inside the templates create an HTML file named index.html. Use for loop to iterate over items as-

{% for i in arr %}
  <div class="row">
    {{ i }}
  </div>
{% endfor %}

We have successfully completed all the major steps to iterate over our array elements, now we should get out output, right. Wait, Wait still we have not set up the complete pipeline, we still are lacking over somewhere. If you run your server now, you might have encountered an error TemplateDoesNotExist. Why so? We have followed all the steps, we have templates, we have an index file, defined the URL, created the function too, but we haven’t installed our app, so our Django doesn’t know from where to fetch the templates.

Open your settings.py file and make the following changes as-

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',
]

We just have added the app inside our installed app.

Now, its time to run our server using –python manage.py runserver

Navigate into the URL of localhost – http://127.0.0.1:8000/

You will get the output screen immediately which will look like-

loop through json array in DjangoSo, we have successfully iterated over our array of elements. I hope you enjoyed reading this tutorial, feel free to comment and share your reviews.

Leave a Reply

Your email address will not be published.