AJAX function inside forEach Loop

Question

I have a function that does a foreach loop in a list of views and needs to send an AJAX request for each view in the loop. When it gets the results in the success function, it checked if a specific Id is returned and, if it is, adds this view to a selectBox. The problem is that when I tried to define the .change event on the selectBox it gave me an error as no option have been added. I have thought about adding ajaxStop, but I have other different AJAX request. Does anybody knows how could i wait till those Ajax request have been finished, but no others?

 var newdiv = $('<div id="viewListDiv" style ="margin:auto" ></div> ')
    var selectBox = $('<select id = "ViewsList" class="form-control" style="width:250px;margin-left: 70px; margin-rigth:70px;" ></select>');
views.forEach(function (view)
    {
        _this.continue = true;
        var guid = view.search({ "type": "resource" })[0].data.guid;
        jQuery.ajax({
            url: "api/forge/modelderivative/metadata/model",
            data: {
                "urn": urn,
                "viewableId": guid,
            },
                success: function (metadata) {
                    _this.getIds(metadata.data);
                    if (_this.listdbId.includes(dbId[0])) {
                        var newOpt = new Option(view.data.viewableID, view.data.name);
                        selectBox.append(newOpt);
                    }
                    _this.listdbId = []
                }
        });
    });
        selectBox = selectBox[0];
        selectBox.change(function (opt) {
            //launch change function
    });

You'd have a much easier time using an API that returns a Promise, like `fetch` or the `axios` library. — thedude, Jul 29 '21 at 12:25
Does this answer your question? [Jquery select change not firing](https://stackoverflow.com/questions/19194177/jquery-select-change-not-firing) — Liam, Jul 29 '21 at 12:26
@Liam Their docs say it returns a `jqXHR` object which is a superset of the XMLHTTPRequest object — thedude, Jul 29 '21 at 13:30
[JQuery 3 implemented the A+ promise standard I believe](https://stackoverflow.com/a/23958233/542251). It looks like no one keeps the jQuery docs up to date anymore which isn't really surprising given it's age. — Liam, Jul 29 '21 at 13:39
JQuery 3 seems to be a mere 5 years old, so cutting edge...for jQuery standards — Liam, Jul 29 '21 at 13:42

score 0 · Answer 1 · answered Jul 30 '21 at 04:30

It looks most like a pure Javascript question rather than Autodesk Forge Viewer. Anyways, no matter you choose to use fetch or jquery.ajax, the AJAX call is an async job. We need to take advantage of the Promise to ensure the call is finished. Here is a revision of your code snippt:

const getModel = (view) => {
    return new Promise((resolve, reject) => {
        let guid = view.search({ "type": "resource" })[0].data.guid;
        jQuery.ajax({
            url: "api/forge/modelderivative/metadata/model",
            data: {
                "urn": urn,
                "viewableId": guid,
            },
            success: function (metadata) {
                resolve(metadata);
            }
        }).fail((jqXHR, textStatus) => reject(jqXHR, textStatus));
    });
};

const tasks = views.map((view) => getModel(view));
const results = await Promise.all(tasks);

for(let i=0; i<results.length; i++) {
    let metadata = results[i];

    //..
}

AJAX function inside forEach Loop

1 Answers1