Application Programming Interface abbreviated as API, are widely used nowadays. API basically provides an interface that allows multiple applications to communicate or share data with each other. When you use an application like Facebook to send an instant message or check weather using a weather forecasting application in your mobile phone, you are using an API. Now you must get at least a little bit of idea about API’s , how big its use is and can provide you data from anywhere, you can even create your own weather forecasting app. You must be wondering How to display API response in HTML.
As a Full Stack Developer you must know how to deal with API’s. Display API data in Django Template is one of the most common use cases of Django Rest Framework. You might encounter the time when you need to use API data in your projects. In this blog, we are going to learn How to display API response in HTML using Django Template. So buckle up yourself and get started to create a small web application using Django and display API data in your webapp. Here we are going to use COVID-19 API and will display the list of countries from that data.
Display API data
Step 1. Create Django Project
We are first going to create a django project, an app inside that project and then going to install requests, which will play a major role.
- Create a Django project.
django admin startproject blogdisplayapi
2. Create app in that django-project.
python manage.py startapp displayapi
3. Install requests (Request rest framework extends the standard httprequest that provides flexible request parsing which helps user to treat requests with JSON data or other media types in the same way that you would normally deal with form data.)
pip install requests
4. Add your app name in installed apps.
Settings.py
INSTALLED_APPS = [ 'displayapi', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ]
Step 2. Add files and Folder to the Django Project
We need to create a template folder in the django folder and a urls.py file in the app folder.
- Create a new folder in the django folder(here, blogdisplayapi folder) save it with the name template.
- Add the path for this template folder in blogdisplayapi > settings.py .
Settings.py
import os
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'template')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
3. Create a new file in the app folder(here, display api) save it with the name urls.py .
4 . Add path for this url.py file in blogdisplayapi > urls.py .
Urls.py
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('displayapi.urls'))
]
Step3. Fetch API data and Display
- Create a function in displayapi (app_name)>views.py, where we are going to import requests and fetch the data from the given api and pass it to the html page.
Link for the COVID API which contain countries name :- https://api.covid19api.com/countries
Views.py
from django.shortcuts import render
import requests
# Create your views here.
def index(request):
response=requests.get('https://api.covid19api.com/countries').json()
return render(request,'index.html',{'response':response})
2. Create a html file in the template folder blogdisplayapi (your_django_folder)>template(folder)>index.html, where we are going to display API response in HTML.
Index.html
<html>
<head>
<title>API Display</title>
</head>
<body>
<h1>List of countries</h1>
{% for i in response %}
<strong>{{i.Country}} ,</strong>
{% endfor %}
</body>
</html>
3. Provide path for the function in view to the urls file in displayapi (your_app_name)>urls.py.
Urls.py
from django.urls import path
from . import views
urlpatterns = [
path('',views.index,name="index"),
]
Output :-
Quick Revision
- Create your django project folder.
- Create an app folder in the django project folder.
- Install requests.
- Add template folder in the django folder and provide its path in django_folder > settings.py .
- Create a file named as urls.py in the app folder and provide its path in django_project > urls.py.
- Make a function for the index html page in app_folder > views.py.
- Add html code for the in django_project > template > index.html.
- Add path of index html page in app_folder > urls.py.
