Skip to content


Digimon API With Call With Python

Mini project application to fetch data from Digimon API, making dynamic and incorporating events so that the user can interact with the DOM. To consume data from API used the Fetch function in JavaScript, and also with the construction of Python query. Go to API page

  • To realize requests with API Digimon used the "requests" library, to read more you should read the documentation: https://pypi.org/project/requests
  • To display the data used paginator

Show Code

Method "index" to retrieve data from API with "requests" library, and display data using django.core.paginator, in views.py application directory.
import logging
import os

import requests
from django.contrib.auth.decorators import login_required
from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
from django.db import IntegrityError, transaction
from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.http import require_POST

from .models import Digimon

logger = logging.getLogger(__name__)

# Create your views here.

def index(request):
    digimons = Digimon.objects.all()
    response = requests.get('https://digimon-api.vercel.app/api/digimon', timeout=10)
    data_api = response.json()
    paginator = Paginator(data_api, 12)
    page = request.GET.get('page')
    try:
        data_list = paginator.page(page)
    except PageNotAnInteger:
        data_list = paginator.page(1)
    except EmptyPage:
        data_list = paginator.page(paginator.num_pages)

    return render(request, "digidesk/index.html", {'page': page, 'digimons': digimons,
                                                   'data_api': data_list})


def javascript_calls(request):
    with open('./mparraf/static/js/digidesk.js') as file:
        content = file.read()
    context = {'javascript_code': content }
    return render(request, "digidesk/javascript_calls.html", context)

def python_calls(request):
    module_dir = os.path.dirname(__file__)
    parent_directory = os.path.dirname(module_dir)
    with open(os.path.join(module_dir, 'views.py')) as file:
        content = file.read()
    with open(os.path.join(parent_directory, 'portfolio/templates/digidesk/index.html')) as file:
        content2 = file.read()
    views = content
    template = content2
    context = {'views': views, 'template': template }
    return render(request, "digidesk/python_calls.html", context)
# Escribe en la base: exige sesión (el ejercicio guardaba filas anónimas sin CSRF).
@login_required
@require_POST
def save_digimon(request):
    params = request.POST
    digi = Digimon()
    digi.name = params["name"]
    digi.level = params["level"]
    digi.image = params["image"]
    # Savepoint: un IntegrityError atrapado sin atomic() deja rota la transacción exterior.
    try:
        with transaction.atomic():
            digi.save()
    except IntegrityError:
        return HttpResponse(status=409)
    return HttpResponse(status=200)

{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% block title %}{% trans "Digidesk API" %} | Marco A. Parra F.{% endblock %}
{% block meta_description %}{% trans "A Django REST Framework API consumed from Python and JavaScript, with its endpoints documented." %}{% endblock %}
{% block content %}
<br>
<br>
<section class="container-section mb-4">
  <div class="container-fluid">
      <div class="row g-0">
          <div class="portfolio-box-caption">
            <div class="row">
              <h1>Digidesk</h1>
            </div>
          </div>
      </div>
    <hr>
    <div class="container">
      <p>
                Mini project application to fetch data from Digimon API, making dynamic and incorporating events so that the user can interact with the DOM.
                To consume data from API used the Fetch function in JavaScript, and also with the construction of Python query.
        <a href="https://digimon-api.vercel.app/">{% trans "Go to API page" %}</a>
      </p>
    </div>
  </div>
</section>

<section class="container-section mb-4">
  <div class="container-fluid">
      <div class="row g-0">
          <div class="portfolio-box-caption">
            <div class="row">
              <h2>{% trans "Retrieve Data From API With Views Django" %}</h2>
            </div>
          </div>
      </div>
      <hr>

      <div class="container">
        <div class="row mt-3">
          {% for item in data_api %}
            <div class="col col-sm-6 col-md-3 ">
              <div class="card text-dark bg-light mb-3" style="max-height: 100vh; overflow:auto;">
                <div class="card-header">
                  <h3 class="card-title">{{ item.name }}</h3>
                </div>
                <div class="body">
                  <img class="card-img-top img-fluid rounded mx-auto d-block" style="max-height:300px;max-width:300px" src="{{ item.img }}">
                  <p class="card-subtitle mb-2 text-muted">{% trans "Level:" %} {{ item.level }}</p>
                  <button data-id="{{ item.name }}" class="sync btn btn-secondary dblock mt-3">{% trans "Sync with the database" %}</button>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
        <div class="row d-flex mb-1">
          {% if data_api.has_previous %}
            <buttom type="button" class="btn btn-outline-secondary"><a href="?page={{ data_api.previous_page_number }}#digimons-list">&laquo; PREV </a></buttom>
          {% endif %}
        </div>
        <div class="row d-flex mb-4">
          {% if data_api.has_next %}
            <button class="btn btn-outline-secondary"><a href="?page={{ data_api.next_page_number }}#digimons_list"> NEXT &raquo;</a></button>
          {% endif %}
        </div>
      </div>
  </div>
</section>

<section class="container-section mb-4">
  <div class="container-fluid">
      <div class="row g-0">
          <div class="portfolio-box-caption">
              <div class="row">
                <h2>{% trans "Display Data With Fetch JavaScript Funcion" %}</h2>
              </div>
          </div>
      </div>
      <hr>
    <div class="container mt-6">
    <div class="container" id="contenido-by-name">
    </div>
    <div class="row justify-content-center">
      <div class="col-8">
        <div class="card text-center" id="digimon_detail">
        </div>
      </div>
    </div>
  </div>
</section>


<section class="container-section mb-4">
  <div class="container-fluid">
      <div class="row g-0">
          <div class="portfolio-box-caption">
              <div class="row">
                <h2>{% trans "Display Digimons Save in DataBase" %}</h2>
              </div>
          </div>
      </div>
      <hr>
      <div class="container">
        <div class="row mt-3">

          {% for item in digimons %}
            <div class="col col-sm-6 col-md-3">
              <div class="card text-dark bg-light mb-3" style="max-height: 100vh; overflow:auto;">
                <div class="card-header">
                  <h3 class="card-title">{{ item.name }}</h3>
                </div>
                <div class="body">
                  <img class="card-img-top img-fluid rounded mx-auto d-block" style="max-height:300px;max-width:300px" src="{{ item.image }}">
                  <p class="card-subtitle mb-2 text-muted">{% trans "Level:" %} {{ item.level }}</p>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
  </div>
</section>


<section class="container">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page"><a href="#">{% trans "Home" %}</a></li>
      <li class="breadcrumb-item"><a href="{% url 'js_digimons' %}">{% trans "API Calls with JavaScript" %}</a></li>
      <li class="breadcrumb-item"><a href="{% url 'py_digimons' %}">{% trans "API Calls with Python" %}</a></li>
      <li class="breadcrumb-item"><a href="#"></a>API Calls connect with Python</li>
    </ol>
  </nav>
</section>


{% endblock %}

{% block js %}
  <script src="{% static 'js/digidesk.js' %}"></script>

{% endblock %}