Как передать данные из успешного вызова AJAX в другой метод на JavaScript?

Вопрос или проблема

$(document).ready(function (){
    loadSkiResortData();
});

function loadSkiResortData(){
    $.ajax({
       method: 'GET',
       url: '/admin/sknowed/loadSkiResortData',
       success: function(response){
           console.log(typeof response.weatherData);
           const obj = JSON.parse(response.weatherData);
           console.log(obj.hourly.temperature_2m);
           console.log(obj.hourly.time);
       }
    });
}

const ctx = document.getElementById('myChart');

new Chart(ctx, 

{
    type: 'line',
    data: 
        {
            labels: // Я хочу заменить этот массив на obj.hourly.time
                [
                    'Красный', 
                    'Синий', 
                    'Жёлтый', 
                    'Зелёный', 
                    'Фиолетовый', 
                    'Оранжевый'
                ],
            datasets: 
                [
                    {
                        label: 'Метка моего графика',
                        data: [12, 19, 3, 5, 2, 3], // Я хочу заменить этот массив на obj.hourly.temperature_2m
                        borderWidth: 1
                    }
                ]
        },
}

Ответ или решение

Конечно! Ниже приведен полный ответ на ваш вопрос о том, как передать данные из AJAX-запроса в другую часть вашего кода JavaScript, в частности, в Chart.js.

Ваш текущий код загружает данные с помощью AJAX и извлекает температуры и временные метки. Давайте мы изменим ваш код так, чтобы он передавал эти данные в конфигурацию Chart.js.

Ваша функция loadSkiResortData будет обновлена, чтобы встраивать данные непосредственно в создание графика. Вот пример, как это можно сделать:

$(document).ready(function (){
    loadSkiResortData();
});

function loadSkiResortData() {
    $.ajax({
       method: 'GET',
       url: '/admin/sknowed/loadSkiResortData',
       success: function(response) {
           console.log(typeof response.weatherData);
           const obj = JSON.parse(response.weatherData);

           // Теперь мы можем использовать obj.hourly.time и obj.hourly.temperature_2m
           const timestamps = obj.hourly.time; // Массив временных меток
           const temperatures = obj.hourly.temperature_2m; // Массив температур

           // Вызываем функцию для создания графика с полученными данными
           createChart(timestamps, temperatures);
       },
       error: function(xhr, status, error) {
           console.error("Ошибка AJAX-запроса:", status, error);
       }
    });
}

function createChart(labels, data) {
    const ctx = document.getElementById('myChart');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels, // Заменяем метки на массив временных меток
            datasets: [
                {
                    label: 'Температура',
                    data: data, // Заменяем данные на массив температур
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: true
                },
                title: {
                    display: true,
                    text: 'График температур'
                }
            }
        }
    });
}

Объяснение кода:

1. Основная структура: Как и раньше, при загрузке страницы вызывается функция loadSkiResortData(), которая делает AJAX-запрос.

2. Успех запроса: В случае успешного ответа данные разбираются и помещаются в переменные timestamps и temperatures.

3. Создание графика: После извлечения данных вызывается функция createChart, которая принимает массивы со временными метками и температурами.

4. Функция createChart: Здесь создается новый экземпляр Chart.js, где данные меток и температур передаются непосредственно в объект данных графика.

5. Обработка ошибок: Я добавил обработку ошибок, чтобы быть в курсе возможных проблем с AJAX-запросом.

Теперь ваш график будет правильно отображать данные из API. Если у вас есть дополнительные вопросы, не стесняйтесь спрашивать!