0

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.

                })

            });
        });
    });
});
5
  • 1
    See Aren't promises just callbacks?
    – VLAZ
    Jan 22, 2021 at 15:25
  • 2
    Stop nesting and just await your $.ajax calls!
    – Jamiec
    Jan 22, 2021 at 15:26
  • You shouldn't edit your question by adding an answer. Instead, utilize the edit functionality, and use comments for questions. Jan 22, 2021 at 15:28
  • Does this answer your question? jquery nested ajax calls formatting Jan 22, 2021 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, 2021 at 15:35

1 Answer 1

0

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.