How to make loop wait till ajax response

Question

$.ajax({
        url: "",
        data: "",
        dataType: 'json',
        success: function (data) {
            var tblBody = '';
            for(var i=0;i<data.length;i++){
                $.ajax({
                    type: "GET",
                    url: "",
                    data: {},
                    success: function(response){
                        // creating table rows
                        tblBody += rowData;
                    },
                    error: function(){
                    }
                });
            }
            $("#losssummary").append(tblBody); // appending table all rows
            createDataTable('sample_1', "M d, yyyy");
        },
        error: function(err)
        {
        }
    });
});

alright, so many edits to your question.Now what is your problem ? — Manoz, Feb 15 '16 at 06:49
you are doing something wrong I think. Rethink what you r actually doing — Mir Gulam Sarwar, Feb 15 '16 at 06:51
use async:false; http://stackoverflow.com/questions/1478295/what-does-async-false-do-in-jquery-ajax#answer-25402055 — Dinesh Patra, Feb 15 '16 at 06:51
Yes. I tried async: false, It's not a good solution. Is there other way? — Ajith, Feb 15 '16 at 06:51
@Manoz Thanks for the edit. My problem is for loop is not waiting for the inner ajax response. — Ajith, Feb 15 '16 at 06:53
@Ajithshetty, At the moment doing `async:false` is most appropriate for your scenario. You can also take use of `.done()` of ajax — Manoz, Feb 15 '16 at 06:56

score 1 · Answer 1 · answered Feb 15 '16 at 07:08

Try this code snippets.

Here I have used $.when().then()and then replaced the if with while.

$.ajax({
        url: "",
        data: "",
        dataType: 'json',
        success: function(data) {
            var tblBody = '',
              i = 0;
            while (i < data.length) {
                $.when(
                  $.ajax({
                      type: "GET",
                      url: "",
                      data: {},
                      success: function(response) {
                          // creating table rows
                          tblBody += rowData;
                      },
                      error: function() {}
                  })
              ).then(function(data, textStatus, jqXHR) {
                  i++;
              });
            }
            $("#losssummary").append(tblBody); // appending table all rows
            createDataTable('sample_1', "M d, yyyy");
        },
        error: function(err) {}
    });

It's going through unlimited loop. – Ajith Feb 15 '16 at 07:56 — Ajith, Feb 15 '16 at 07:56
did the `i` incremented or not? – John R Feb 15 '16 at 08:38 — John R, Feb 15 '16 at 08:38
Did `then` method executing? Or else try with `done()`. – John R Feb 15 '16 at 10:44 — John R, Feb 15 '16 at 10:44

score 1 · Answer 2 · answered Feb 15 '16 at 07:08

$.ajax({
        url: "",
        data: "",
        dataType: 'json',
        success: function (data) {
            var tblBody = '';
            var i = 0;
            selfCalling(data);

            function selfCalling(data){
                $.ajax({
                    type: "GET",
                    url: "",
                    data: {},
                    success: function(response){
                        // creating table rows
                        tblBody += rowData;

                        while(i<data.length){
                              selfCalling(data);
                              i++;
                        }
                    },
                    error: function(){
                    }
                });


            }
            $("#losssummary").append(tblBody); // appending table all rows
            createDataTable('sample_1', "M d, yyyy");
        },
        error: function(err)
        {
        }
    });
});

This uses recursive function to solve your problem. Hope it helps

score 1 · Answer 3 · answered Feb 15 '16 at 07:23

1

Use complete option rather success option

answered Feb 15 '16 at 07:23

Wahid Masud

993
10
35

How to make loop wait till ajax response

3 Answers3