Представление данных, полученных из стороннего api, в django с помощью chart.js

Я работаю над сайтом, который показывает витамины в продуктах питания Я использую сторонний api, который предоставляет данные, которые мне нужны, проблема в том, что я не могу найти способ представить эти данные в chart.js, то, что я в основном пытаюсь сделать, это получить данные из api, затем извлечь метки и количество, которое мне нужно из данных, но я не знаю, как передать это в шаблон и быть в состоянии фактически использовать его в моем файле javascript.

Вот код, который я сейчас пытаюсь заставить работать с ним, в настоящее время он испорчен, потому что я постоянно добавляю и удаляю его, но я надеюсь, что вы понимаете, что я пытаюсь сделать

views.py

def food_info(food_id, amount):
    info = requests.get(
        f'{base_url}/food/ingredients/{food_id}/information?amount={amount}&unit=grams&apiKey=')
    food = info.json()
    nutrients_data = food['nutrition']['nutrients']
    labels = [nutrient['title'] for nutrient in nutrients_data if nutrient['amount'] > 0]
    return JsonResponse(data={'labels':labels})
    
def search_food(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        amount = request.POST.get('amount')
        result = requests.get(
            f'{base_url}/food/ingredients/search?query={name}&addChildren=false&number=1&apiKey=')
        result = result.json()
        food_id = result['results'][0]['id']
        food_info(food_id,amount)
    return render(request, 'food/test.html')
 
class FoodChartData(APIView):
    authentication_classes = []
    permission_classes = []

    def get(self, request, format=None):
        labels = ['Cholesterol', 'Saturated Fat',
                  'Phosphorus', 'Poly Unsaturated Fat', 'Fiber']
        food_data = [0.08, 0.01, 0.25, 1.0, 0.5]
        data = {
            'labels': labels,
            "data": food_data
        }
        return Response(data)

urls.py

from .views import  FoodChartData,search_food,food_info
from django.urls import path


urlpatterns = [
    path('api/chart/data', food_info, name='chart-data'),
    path('', search_food, name='food-search')
]

Javascript

var endpoint = 'api/chart/data'
$.ajax({
    method:"GET",
    url:endpoint,
    success : function(data){
        labels = data.labels
        defaultData = data.data
        console.log('success')
        console.log(labels)
        
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'food info',
            data: defaultData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

    }})

Вернуться на верх