'django ajax get model data in JS variable

Trying to get my model data from django views.py in home.html javascript variable using AJAX.

So far I'm at :

Views.py:

class HomePageView(ListView):
    model = Flights
    template_name = 'home.html'

    def flights_list(request):
        flights = serializers.serialize("json", Flights.objects.all())
        return JsonResponse({"flights": flights})

Ajax:

function get_data() {
        $.ajax({
        url: '', //Not sure what to put here.
        datatype: 'json',
        type: 'GET',
        success: function (data) {
             alert("Got data!")
            locations = {{ flights }};
        }
    });
};
        $(document).ready(function(){
        setInterval(get_data,5000);
        });

Every 5 seconds i'm getting alert "Got data!" But when I'm trying to pass variable location = {{ flights }}; Then locations is empty. in ajax url:'' i suppose to have my views.py location? as when trying to alert("Got data!" + data) then my whole html is in that data variable..

Am i doing something wrong here?

UPDATE:

My flights urls:

from django.urls import path
from rest_framework import routers
from . import views

router = routers.DefaultRouter()
router.register(r'flights', views.FlightViewSet)

urlpatterns = [
    path('',views.HomePageView.as_view(),name='home'),
]

Update 2:

Ok so I've found out what's wrong, Changed urls.py:

urlpatterns = [
    path('',views.HomePageView.as_view(),name='home'),
    path('flights/', views.flightslist, name='flights')
]

Views.py:

def flightslist(request):
    flights = serializers.serialize("json", Flights.objects.all())
    return JsonResponse(flights, safe=False)

Had to add safe=False as no other way worked..

Update:

I've managed to sort it out by code:

function get_data() {
            $.ajax({
            url: 'flights/',
            datatype: 'json',
            type: 'GET',
            success: function (data) {
                 alert("Got data!")
            var locations = data; 
            }
        });
    };
            $(document).ready(function(){
            setInterval(get_data,5000);
            });

How to convert var locations = data to dictionaries? As now it shows up as :

[{"model": "flightapp.flights", "pk": 390, "fields": and only then dictionary that i need.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source