Best practice for nesting ajax calls

Question

I am creating a simple app using Spotify REST API and JQuery where users can find an artist, and then it will show info about the artist, related artists, and most listened to songs on-page. I created 3 ajax calls which u can see below and everything works, but I think that it can be written in a better way (promises maybe?).

The first ajax call gets id from the server and create some DOM elements. The second two ajax calls need id to run and also create DOM elements. There is also a delete button that should delete DOM elements built from the data of each ajax call.

Is it possible to have it nested using the best practice or this is the only way possible?


    artistForm.submit((e) => {
    e.preventDefault();
    let inputSearchQuery = artistInput.val();
    let searchQuery = encodeURI(inputSearchQuery);

    $.ajax({
        url: `${baseUrl}search?q=${searchQuery}&type=artist`,
        type: 'GET',
        datatype: 'json',
        headers: {
            'Authorization': 'Bearer ' + accessToken
        }
    }).done((resp) => {

        
        const artistId = (resp.artists.items[0].id);
        // working with data and appending them on DOM


        $.ajax({
            url: `${baseUrl}artists/${artistId}/top-tracks?country=CZ`,
            type: 'GET',
            datatype: 'json',
            headers: {
                'Authorization': 'Bearer ' + accessToken
            }
        }).done((resp) => {

            // working with data and appending them on DOM

            $.ajax({
                url: `${baseUrl}artists/${artistId}/related-artists`,
                type: 'GET',
                datatype: 'json',
                headers: {
                    'Authorization': 'Bearer ' + accessToken
                }
            }).done((resp) => {

                // working with data and appending them on DOM

                deleteArtist.click(() => {
                   // need to have acces to data from every ajax call.

                })

            });
        });
    });
});

See [Aren't promises just callbacks?](https://stackoverflow.com/q/22539815) — VLAZ, Jan 22 '21 at 15:25
You shouldn't edit your question by adding an answer. Instead, utilize the edit functionality, and use comments for questions. — silencedogood, Jan 22 '21 at 15:28
Does this answer your question? [jquery nested ajax calls formatting](https://stackoverflow.com/questions/22233650/jquery-nested-ajax-calls-formatting) — Bjørn Reemer, Jan 22 '21 at 15:29
@BjørnReemer Yes, I tried doing this. But the problem is with the delete button, which has to delete DOM elements from every ajax call. I can't access dom elements if I use this method. — Pulman3, Jan 22 '21 at 15:35

score 0 · Accepted Answer · edited May 23 '23 at 04:38

Given your work case, you could consider the following method:

artistForm.submit(async (e) => {
    e.preventDefault();
    let inputSearchQuery = artistInput.val();
    let searchQuery = encodeURI(inputSearchQuery);

    let artist = await $.ajax({
        url: `${baseUrl}search?q=${searchQuery}&type=artist`,
        type: 'GET',
        datatype: 'json',
        headers: {
            'Authorization': 'Bearer ' + accessToken
        }
    });

    const artistId = artists.items[0].id;
    let topTracks = await $.ajax({
        url: `${baseUrl}artists/${artistId}/top-tracks?country=CZ`,
        type: 'GET',
        datatype: 'json',
        headers: {
            'Authorization': 'Bearer ' + accessToken
        }
    });

    let relatedArtists = await $.ajax({
        url: `${baseUrl}artists/${artistId}/related-artists`,
        type: 'GET',
        datatype: 'json',
        headers: {
            'Authorization': 'Bearer ' + accessToken
        }
    });

    deleteArtist.click(() => {
        // need to have access to data from every ajax call.
    });
});

This is assuming you are using jQuery 3.0 or higher. If not you can find a nice wrapper function here.

If you want to learn more about promises and async await I recommend the following video's: JavaScript Promises In 10 Minutes - by Web Dev Simplified and The Async Await Episode I Promised - by Fireship.

Best practice for nesting ajax calls

1 Answers1