Jump to content

synchronous ajax call in javascript and array.push in and ajax response


mickle026

Recommended Posts

mickle026

I am trying to rewrite a plugin to work clientside using ajax requests to control the flow of data so , but I have a problem.  Item's are not running synchronously and I think its because of the ajax (apiclient) requests are usually async.

I have tried adding async = false to the api call am I am wordering if the format is correct as if I log the 'i' in the for loop, the for loop continues and stacks up the api calls that then resolve when the loop is finished.  What seems to be happening is that the loop is not waiting for the api (ajax) responses and continuing.

ApiClient.getJSON(ApiClient.getUrl('MyPeople/GetPeopleInfo'), async = false).then(response => {

My Code so far

        var loopcounter = 0;
        var xlog = ["MyPeople Log", "Created via Emby Plugin 'My People'"];


        ApiClient.GetPeopleInfo = function () {
           // update placeholder section
            document.getElementById("xGetPeopleInfo").innerHTML = "Request is running...please wait..";
            document.getElementById("xGetPeopleInfo1").innerHTML = "Querying Database for number of unique people id's. This might take a few minutes.";

            ApiClient.getJSON(ApiClient.getUrl('MyPeople/GetPeopleIDS'), async = false).then(response => {

                document.getElementById("xGetPeopleInfo").innerHTML = "Completed Database Query";
                document.getElementById("report1").innerHTML = "<h3>There are <b>" + response + "</b> unique People to check.</h3>";

                loopcounter = response; // need this for reporting information

                xlog.push("There are " + response + " unique People to check.");
                xlog.push("------------------------------------------------------------------");

                var tmp;
                var i; // because external counter starts at 1 insted of 0
                for (i = 1; i < loopcounter + 1; i++) {


                    document.getElementById("xGetPeopleInfo2").innerHTML = "";

                    xlog.push("Currently processing person " + i + " of " + loopcounter + " records");

                    document.getElementById("xGetPeopleInfo").innerHTML = "Currently processing person <b>" + i + "</b> of <b>" + loopcounter + "</b> records";
                    document.getElementById("xGetPeopleInfo1").innerHTML = "";

                    // gets the persons Name
                    ApiClient.getJSON(ApiClient.getUrl('MyPeople/ProcessID'), async = false).then(response => {

                        document.getElementById("xGetPeopleInfo1").innerHTML = "<b>Person Name: </b>" + response;
                        console.log("Person Name:" + response.toString());
                        xlog.push("Person Name:" + response.toString());
                    }).catch(e => {
                        console.log(e);
                    });


					// write current operation to the html
                    ApiClient.getJSON(ApiClient.getUrl('MyPeople/CheckFile'), async = false).then(response => {
                        
                        if (response == "File Does Not Exist!") {
                            xlog.push(response);
                            document.getElementById("xGetPeopleInfo2").innerHTML = "<b>Image Url Check: </b>" + response;
                            // Still to Do .............
                            //
                            //
                        }
                        else {
                            xlog.push(response);
                            document.getElementById("xGetPeopleInfo2").innerHTML = "<b>Image Url Check: </b>" + response;
                        }

                    }).catch(e => {
                        console.log(e);
                    });
                    xlog.push(tmp);

                    // remove the item from the stack

                    ApiClient.getJSON(ApiClient.getUrl('MyPeople/RemoveID'), async = false).then(response => {
                        document.getElementById("xGetPeopleInfo2").innerHTML = response;
                        xlog.push(response);
                    }).catch(e => {
                        console.log(e);
                    });

                }
                
            }).catch(e => {
                console.log(e);
            });
        }

I also have another problem in that I have an array that is a global var (xlog) where I want to push entries (text) so that I can create a log on the client via a download link.  I can do the log and the download link to text file part, but I am having problems pushing entries to the array.  The push works, but the variable is either empty or undefined.

The xlog.push' es work at the beggining of the code, its when I enter an api call they don't

 

Can anyone shed me some light where I am doing either thing wrong?

Edited by mickle026
Link to comment
Share on other sites

You're running through the for loop starting off async operations, but not waiting on them to complete before moving to the next one in the list.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...