Kako poslati podatke u JavaScriptu iz AJAX Success povratnog poziva u Chart.js

Rješenje 1: prosljeđivanje AJAX podataka u Chart.js s povratnim pozivima

Ova metoda prikazuje grafikon pomoću Chart.js i koristi jQuery za AJAX. Povratni pozivi koriste se u rješenju za prijenos podataka iz uspješne metode AJAX u drugu funkciju.

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

function loadSkiResortData() {
    $.ajax({
        method: 'GET',
        url: '/admin/sknowed/loadSkiResortData',
        success: function(response) {
            const obj = JSON.parse(response.weatherData);
            const temperatures = obj.hourly.temperature_2m;
            const times = obj.hourly.time;
            renderChart(times, temperatures);
        },
        error: function() {
            console.error('Failed to load data');
        }
    });
}

function renderChart(labels, data) {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Temperature Over Time',
                data: data,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

Rješenje 2: Modularni pristup s obećanjima

U ovoj metodi, kod je modulariziran, a podaci iz AJAX rukovatelja uspjehom prosljeđuju se putem JavaScript obećanja, a ne povratnih poziva. Kao rezultat toga osigurana je bolja čitljivost i fleksibilnost.

$(document).ready(function() {
    loadSkiResortData()
        .then(data => {
            const { temperature_2m, time } = data.hourly;
            renderChart(time, temperature_2m);
        })
        .catch(error => console.error('Error loading data:', error));
});

function loadSkiResortData() {
    return new Promise((resolve, reject) => {
        $.ajax({
            method: 'GET',
            url: '/admin/sknowed/loadSkiResortData',
            success: function(response) {
                const data = JSON.parse(response.weatherData);
                resolve(data);
            },
            error: function(error) {
                reject(error);
            }
        });
    });
}

function renderChart(labels, data) {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Temperature Over Time',
                data: data,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

Rješenje 3: Upotreba Fetch API-ja s Async/Await

Ovaj pristup koristi async/await za rukovanje asinkronim podacima i zamjenjuje jQuery AJAX s novijim Fetch API-jem. Radi robusnosti uključeno je i rukovanje pogreškama.

document.addEventListener('DOMContentLoaded', async () => {
    try {
        const data = await loadSkiResortData();
        const { temperature_2m, time } = data.hourly;
        renderChart(time, temperature_2m);
    } catch (error) {
        console.error('Error loading data:', error);
    }
});

async function loadSkiResortData() {
    const response = await fetch('/admin/sknowed/loadSkiResortData');
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    const result = await response.json();
    return JSON.parse(result.weatherData);
}

function renderChart(labels, data) {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Temperature Over Time',
                data: data,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

Uobičajena pitanja o prosljeđivanju AJAX podataka u JavaScriptu

1. Kako mogu proslijediti AJAX podatke drugoj funkciji?
2. Za slanje podataka drugoj metodi upotrijebite funkciju povratnog poziva u success rukovatelj AJAX poziva.
3. Koja je uloga JSON.parse() u rukovanju podacima poslužitelja?
4. Kako bi se olakšala manipulacija podacima, JSON.parse() transformira odgovor JSON niza poslužitelja u JavaScript objekt.
5. Kako mogu riješiti pogreške tijekom AJAX poziva?
6. Za učinkovito upravljanje pogreškama, koristite a catch() blok u a fetch() zahtjev ili koristite error povratni poziv u AJAX-u.
7. Kako mogu osigurati ažuriranje dinamičkih podataka u mom grafikonu?
8. Nakon dodavanja novih oznaka ili podataka, nazovite update() na vašem Chart.js objekt za ažuriranje grafikona s najnovijim vrijednostima.
9. Kako se async/await pomoć s AJAX zahtjevima?
10. async/await čini asinkroni kod sinkronijim, poboljšavajući čitljivost i obradu pogrešaka AJAX poziva.

Završne misli o rukovanju asinkronim podacima u JavaScriptu

Kada razvijate dinamičke online aplikacije, prijenos podataka iz AJAX uspješne funkcije u druge dijelove vašeg koda je bitan. Možete osigurati čist kôd koji se može ponovno koristiti i ubrzati ovaj proces korištenjem modularnih funkcija.

Nadalje, programeri mogu bolje upravljati asinkronim podacima korištenjem strategija kao što su Obećanja i asinkroni/čekaj, koji poboljšavaju čitljivost i lakoću održavanja. Kada se pogreške ispravno rješavaju, rješenje postaje pouzdano i jednostavno za korištenje.