Question posted in
You can find the official documentation here.

Nested ajax function calls inside a for loop – Jquery ajax

I have looked into many solutions which uses deffered and promises.Tried those solutions in my scenario but couldn’t got a solution.I have been fighting with through out the entire day.My scenario is.

I have array of customers.And i need to do some certain actions to each customer one by one which are defined as ajax.

private function main()
{
    customers=["customer1","customer2"]
    customers.forEach(function(customer) {

        function1();
        function2();
        function3();

    }
}
private function function1()
{
     $.ajax({
                type: "POST",
                url: Url1,
                data: {},
                success: function (data) {
                    console.log("a");
                },
                dataType: 'JSON'
            });
}
private function function2()
{
     $.ajax({
                type: "POST",
                url: Url2,
                data: {},
                success: function (data) {
                    console.log("b");
                },
                dataType: 'JSON'
            });
}
private function function3()
{
     $.ajax({
                type: "POST",
                url: Url3,
                data: {},
                success: function (data) {
                    console.log("c");
                },
                dataType: 'JSON'
            });
}

When the main function is called .My desired output is

a
b
c
a
b
c

But the output i am getting is

a
a
b
b
c
c

Please help me find a solution.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally i solved my issue by making a recursive function call without using loop.

    var customers=["customer1","customer2"];
var currentIndex=0;
private function main()
{
  if(customers[currentIndex]){
   function1().done(function(data) {
     console.log("a");
      function2().done(function(data) {
        console.log("b");
        function3().done(function(data) {
          console.log("c");
           currentIndex++; 
           main();
        });
      });
   });
   
  }
}
private function1()
{
  return  $.ajax({
                type: "POST",
                url: url1,
                data: {},
                dataType: 'JSON'
            });
}
private function2()
{
  return  $.ajax({
                type: "POST",
                url: url2,
                data: {},
                dataType: 'JSON'
            });
}
private function3()
{
  return  $.ajax({
                type: "POST",
                url: url3,
                data: {},
                dataType: 'JSON'
            });
}

    And current output is

    a
b
c
a
b
c

  2. 0

    Ajax call by default is the async. action.

    function send() {
  fetch(
    url,
    {
      method: 'post',
      header: {'Content-Type' : 'application/text'},
      body: 'a'
    }
  ).then(
    () => {
      console.log('a is sended');
      fetch(
        url,
        {
          method: 'post',
          header: {'Content-Type' : 'application/text'},
          body: 'b'
        }
      ).then(
          () => {
            console.log('b is sended'); 
            fetch(
              url,
              {
                method: 'post',
                header: {'Content-Type' : 'application/text'},
                body: 'c'
              }
            ).then( () => console.log('c is sended') )
          }
        )
    }
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search