jQuery ajax double get with for

Question

I'm new with jQuery and I want to know best practices about it... I did something but I feel that this is not the way to go because it does a bunch on query

Here is my code :

$.ajax({
    type: 'GET',
    dataType: 'json',
    url: 'api/items/' + idfinal,
    success: function (data) {
        $('#item-all').empty();
        $('#builder').addClass('hidden');
        if ($('#btnsuc').length === 0) {
            $('#page').append('<div class="item-searcher" id="item-searcher"><button class="btn-success" id="btnsuc">Retour</button><div class="item-all" id="item-all"></div></div>');
        }
        else {
            $('#item-searcher').removeClass('hidden');
        }
        for (var i = 0; i < data.length; i++) {
            $('#item-all').append('<div class="item-frame-v" id="myitem'+data[i].id_equipement+'" name="'+myid+'" item="'+data[i].id_equipement+'"><img src="'+data[i].image_equipement+'">'+data[i].nom_equipement + '</div>');
            idItemActuel = data[i].id_equipement;
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: 'api/stats/' + idItemActuel,
                success: function (statsItem){
                    for(var x =0; x < statsItem.length; x++){
                        $('#myitem'+statsItem[x].id_equipement).append(statsItem[x].poids_equipement_stats + ' ' + statsItem[x].nom_stats + '<br/>');
                    }
                }
            })
        }
    },
});

I first take data on a particular type, then I extract data from associative entity with the ID I got.

With more data, my ajax will probably take a lot of time to reach all asked elements... What is the best way to go?

James Hill · Accepted Answer · 2018-04-09T18:44:07.890

0

Your approach is fine. A few things that I would change:

For performance reasons, you should never edit the DOM in a loop. Build your HTML, and then inject it when you're done.
Put your success callbacks in functions to clean up the code a bit.

EDIT - HTML building example

// Create variable to hold HTML to append to body
let htmlToAppend = "";

for (var i = 0; i < data.length; i++) {
    // Loop through data and build HTML
    htmlToAppend += '<div class="item-frame-v" id="myitem' + data[i].id_equipement + '" name="' + myid + '" item="' + data[i].id_equipement + '"><img src="' + data[i].image_equipement + '">' + data[i].nom_equipement + '</div>';

  // other code...
}

// Append HTML to container
$('#item-all').append(htmlToAppend);

edited Apr 09 '18 at 18:44

answered Apr 09 '18 at 18:34

James Hill

60,353
20
145
161

Thanks for answering! Can you give me an exemple on how I should build my HTML please? Also, someone told me about Promise to achieve what I want, is it better to go with promise? – Zeyukan Ich' Apr 09 '18 at 18:37
Take a look at this to learn the difference between success and promise: https://stackoverflow.com/questions/46556845/difference-between-promise-and-success-in-ajax – James Hill Apr 09 '18 at 18:40
@downvoter, can you give me a hint what you didn't like? – James Hill Apr 09 '18 at 18:45

jQuery ajax double get with for

1 Answers1