Джанго (REST Framework) в JSON.Как получить данные через мой API в JavaScript?

Question

как получить данные с помощью JavaScript из моего API?

Моя цель - визуализировать мои данные модели в виде диаграмм или графиков.Для визуализации я бы хотел выбрать Charts.js.Пока я могу отображать диаграмму в моем шаблоне с данными по умолчанию.Теперь я хотел бы отправить данные моей модели в мой шаблон и интегрировать их в chart.js.Chart.js, как я понимаю, нуждается в формате JSON.Поэтому я настроил API с помощью Django REST Framework и получил вывод.

Структура папки

  visual # -- my project
    ├── cars # -- API
    │   ├── templates
    │   │   └── cars   
    │   │       └── cars_home.html
    │   ├── <...>
    │   ├── urls.py
    │   ├── serializers.py
    │   └── views.py
    ├── charts
    ├── static
    │   ├── css
    │   ├── img
    │   └── js
    │       ├── chart_2.js
    │       └── <...>
    ├── templates
    │   ├── base
    │   │   └── base.html
    │   └── includes
    ├── visual
    │   ├── settings.py
    │   ├── urls.py
    │   └── views.py   *db.sqlite3
    └── manage.py

.. / cars / urls.py

from django.urls import path
from rest_framework.urlpatterns import format_suffix_patterns
from cars import views
from cars.views import CarsHomeView

app_name = 'cars' 

urlpatterns = [
    path('carshome/', CarsHomeView.as_view(), name='cars_home'),
    path('cars/', views.SnippetList.as_view()),
    path('cars/<int:pk>/', views.SnippetDetail.as_view()),
]

urlpatterns = format_suffix_patterns(urlpatterns)

Здесьэто вывод моего API :

http://127.0.0.1:8000/cars/

HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 4,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 3,
            "name": "Audi",
            "price": 11
        },
        {
            "id": 4,
            "name": "Audi",
            "price": 11
        },
        {
            "id": 2,
            "name": "Mercedes",
            "price": 22
        },
        {
            "id": 1,
            "name": "BMW",
            "price": 99
        }
    ]
}

И это необработанный вывод на

http://127.0.0.1:8000/cars/?format=json

{"count":4,"next":null,"previous":null,"results":[{"id":3,"name":"Audi","price":11},{"id":4,"name":"Audi","price":11},{"id":2,"name":"Mercedes","price":22},{"id":1,"name":"BMW","price":99}]}

Вопрос в том, как извлечь данные с помощью JavaScript из моего API?

Мой подход был, прежде всего, первымпросто распечатать данные в моем шаблоне, - чтобы проверить, работает ли он.Другое дело, что попробуйте две разные вещи.Один из них - поместить код JavaScript в extern-файл в моей папке static / js.Это по крайней мере работало с Chart.js и значениями по умолчанию.Но теперь я также предоставляю js-код в своем шаблоне, потому что, возможно, js имеет некоторую проблему для ссылки на мой API, когда он находится в моей статической папке.

так вот файл template.html.У меня есть код выборки JS с сайта Tutorial Site, к сожалению, я не смог найти пример django - js.

.. / cars / templates / cars / cars_home.py

{% extends 'base.html' %}

{% load static %}

{% block content %}

<div class="container-fluid">
    <div class="row">
        <h1>Wellcome to Cars Home</h1>
    </div>

    <div class="row">


        <!--via external js-->
        <script src="{% static 'js/chart_2.js' %}"></script>


        <!--via internal js-->
        <script>
            fetch('http://127.0.0.1:8000/cars/?format=json')
                .then(response => {
                    return response.json()
                })
                .then(data => {
                    // Work with JSON data here
                    console.log(data)
                })
                .catch(err => {
                    // Do something for an error here
                })

        </script>

    </div>
</div>

{% endblock content %}

Еще один вопрос: мне нужны все эти вещи в выходных данных API?

{"count":4,"next":null,"previous":null,"

Полагаю, было бы намного приятнее, если бы это выглядело так?

"results":[{"id":3,"name":"Audi","price":11},{"id":4,"name":"Audi","price":11},{"id":2,"name":"Mercedes","price":22},{"id":1,"name":"BMW","price":99}]}

Обновление: Кажется, моя консоль в Firefox имела некоторые проблемы и не отображала массив и объекты.Я перешел на консоль Chrome, и она показала мне все.

Answer 1

Несколько вещей

"count":4,"next":null,"previous":null," - это то, что вы захотите разбить на страницы своих ресурсов API позже.Если вы хотите ограничить ваш звонок до 10 за раз и показать потенциальные следующие страницы на вашем сайте.Если бы вы показали 10 страниц и насчитали 25, вы бы показали 3 потенциальных страницы, например, интернет-магазин.Возможно, вам это понадобится позже.

Ваш сценарий ничего не делает?Вы не получаете никаких данных в консоли?Я хотел бы убедиться, что вы можете перейти на этот реальный веб-сайт в вашем браузере и посмотреть что-нибудь.Я не могу получить доступ к тому, что находится на вашем локальном компьютере.

<script>
            fetch('http://127.0.0.1:8000/cars/?format=json')
                .then(response => {
                    return response.json()
                })
                .then(data => {
                    // Work with JSON data here
                    console.log(data)
                })
                .catch(err => {
                    // Do something for an error here
                })

        </script>

Я бы порекомендовал посмотреть на Джинджу.Это промежуточное ПО, предназначенное для работы с бэкэндами Django и позволяющее напрямую использовать эти данные с html для выполнения чего-то вроде

{% for car in cars %}
  <li> <strong>{{car.name}}:</strong> {{car.price}} </li>
{% endfor %}