Iterating through a series of AJAX requests in JavaScript until the variable equals "No" and then terminating the loop

Question

Iterating through a series of AJAX requests in JavaScript until the variable equals "No" and then terminating the loop

After dedicating the past two days to my work, I am still struggling to find a solution. Any assistance would be greatly appreciated. My current setup involves nodejs and Vue.

I need help figuring out how to break out of an AJAX call when receiving a "No" result and stop the loop.
I am encountering issues accessing the userExist array variable.
The same problem arises when trying to work with the this.info['isthisUser'] Vue variable.

var thisUser = ["NY","NJ","CT","CA"]

var userExist = mycheck(thisUser)
console.log(userExist);

this.info['isthisUser'] = userExist;
console.log(this.info['isthisUser']);    

function mycheck(val) { 
    var usCNT = val.length; 
    var array = new Array();

    if (usCNT>0) {
        for (var u=0; u<usCNT; u++) {
        var checkThisUser = val[u];
            $.ajax
            ({
            type: "POST",
            url: '/getStates',
            data: { user: checkThisUser,},
            success: function (data, msg) {
            result = data ; 
            array.push(result);
            if(result === 'No') {
                alert('not exist');
                }
            })
        }
    }   
    return array;
};

console.log(userExist) displays the following format:

[]
0: "No"
1: "No"
2: "No"
3: "Yes"
length: 4
__ob__: Observer {value: Array(4), dep: Dep, vmCount: 0}
__proto__: Array

console.log(this.info['isthisUser'])

shows the below:

[__ob__: Observer]
0: "No"
1: "No"
2: "No"
3: "Yes"
length: 4
__ob__: Observer {value: Array(4), dep: Dep, vmCount: 0}
__proto__: Array

javascript vue.js

Answer 1

Answer №1

This code is outdated, and remember that $.ajax requests are executed simultaneously, so stopping a loop early will not stop them from completing unless they are specifically aborted.

If you need the requests to run one after another, you can use async..await. The $.ajax function can return a promise:

async function mycheck(val) { 
    ...
    var array = [];
    for (var u=0; u<usCNT; u++) {
        var result = await $.ajax({
          type: "POST",
          url: '/getStates',
          data: { user: checkThisUser,}
        });
        if (result === 'No') {
            throw new Error('not exist');
        }
        array.push(result);
    }
    return array;
};

Using promises requires consistent usage with either async..await or plain then and catch. Since mycheck can return a rejected promise on throw, errors must be handled by the caller.

If the goal of this function is to return a boolean value, it can be simplified as follows:

    ...
    for (var u=0; u<usCNT; u++) {
        var result = await $.ajax({
          type: "POST",
          url: '/getStates',
          data: { user: checkThisUser,}
        });
        if (result === 'No') {
           return false;
        }
    }
    return true;

Answer 2

This code is outdated, and remember that $.ajax requests are executed simultaneously, so stopping a loop early will not stop them from completing unless they are specifically aborted.

If you need the requests to run one after another, you can use async..await. The $.ajax function can return a promise:

async function mycheck(val) { 
    ...
    var array = [];
    for (var u=0; u<usCNT; u++) {
        var result = await $.ajax({
          type: "POST",
          url: '/getStates',
          data: { user: checkThisUser,}
        });
        if (result === 'No') {
            throw new Error('not exist');
        }
        array.push(result);
    }
    return array;
};

Using promises requires consistent usage with either async..await or plain then and catch. Since mycheck can return a rejected promise on throw, errors must be handled by the caller.

If the goal of this function is to return a boolean value, it can be simplified as follows:

    ...
    for (var u=0; u<usCNT; u++) {
        var result = await $.ajax({
          type: "POST",
          url: '/getStates',
          data: { user: checkThisUser,}
        });
        if (result === 'No') {
           return false;
        }
    }
    return true;

Iterating through a series of AJAX requests in JavaScript until the variable equals "No" and then terminating the loop

Answer №1

Similar questions

Ways to apply the margin-top property to create space between an input field and

Experiencing issues with passwords in nodemailer and node

What could be causing my issue with the if-else condition not functioning properly?

Creating a layout of <video> components in vue.js, complete with the ability to rearrange and resize them through drag and drop functionality

Creating a nested list of objects in JavaScript can be achieved by using arrays within objects

Establishing Redux States within the Provider (error: Provider encountering useMemo issue)

What's the best way to manage endless routing options in express.js?

Click to expand for answers to commonly asked questions

Passing data from an API in Vue.js to a different page

Cross-domain scripting

Guide to filling a Vuetify v-file-input with pre-set text contents?

Leveraging a personalized Vue directive alongside Inertia.js

What could be causing the shake effect on the MUI dialog to not work when clicking away?

Refreshing specific iframes without having to reload the entire webpage using jQuery

Several adhesive panels on a dynamic webpage

The built-in functions of Wordpress are not able to be identified in the ajax PHP file

Express npm dependency fails to start globally

What could be causing the malfunction of the map function, despite the code appearing to be correct?

Implementing Skeleton Loading Animation for VueJS Components during Firebase Data Retrieval

"Using the check function in JavaScript to determine if a value