Jquery ajax call inside another ajax call is not working as expected inside a for loop

Question

I have an ajax call within a for loop which is inside another ajax call. The code is as follows:

 $.ajax({

        type: "GET",
        url: URI, //URI
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (Json) {

            var tr = '';
            tr = tr + '<tr>';
            for (var i = 0; i < Json.length; i++) {
                debugger;
                tr = tr + '<td>'
                tr = tr + '<table><tr><td>'
                tr = tr + '<div id="theDiv" class="DivClass">';
                tr = tr + '<img  id="btnEdit" onclick="EditLevelZeroValue(' + Json[i].ID + ')" src="../Images/Edit-icon.png" title="Edit" alt="Smiley face" style="padding-left:24px;"><img src="../Images/delete.gif" title="Delete" alt="Smiley face" style="margin-left:-17px;margin-bottom:-70px;">';
                tr = tr + " <label id='LevelLbl' style='position:relative; z-index:2;top: 20px; color:white;'> " + Json[i].Title + " </label>";
                tr = tr + " </div> ";
                tr = tr + " </td> ";
                tr = tr + "</tr> ";

                var URI1 = OMSiteUrl + 'api/Levels/GetLevelOne?subModuleID=' + 1 + '&parentId=' + Json[i].ID;

                debugger;
                $.ajax({

                    type: "GET",
                    url: URI1, //URI
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (Json1) {

                        debugger;
                        for (var j = 0; j < Json1.length; j++) {
                            debugger;

                            if (Json1[j].Publish==true)

                            {

                                tr = tr + "<tr><td>";
                                tr = tr + '<div id="theDiv" Class="DivClass2">';
                                tr = tr + '<img src="../Images/Edit-icon.png" title="Edit" alt="Smiley face" style="padding-left:6px;margin-top:-40px;"><img src="../Images/delete.gif" title="Delete" alt="Smiley face" style="margin-left:-17px;margin-bottom:-35px;">';
                                tr = tr + " <label id='LevelLbl' class='font'style='margin-top:17%;margin-left:26%'> " + Json1[j].Title + "</label>";
                                tr = tr + "</td></tr>"
                            }
                            else 
                            {

                                tr = tr + "<tr><td>";
                                tr = tr + '<div id="theDiv" Class="DivClassChange">';
                                tr = tr + '<img src="../Images/Edit-icon.png" title="Edit" alt="Smiley face" style="padding-left:6px;margin-top:-40px;"><img src="../Images/delete.gif" title="Delete" alt="Smiley face" style="margin-left:-17px;margin-bottom:-35px;">';
                                tr = tr + " <label id='LevelLbl' class='font'style='margin-top:17%;margin-left:26%'> " + Json1[j].Title + "</label>";
                                tr = tr + "</td></tr>"
                            }


                        }


                    },
                    error: function () { alert('error'); }
                });

                tr = tr + "</table>";
                tr = tr + "</td>";


            }

            tr = tr + '</tr>';
            $('#levelBox').html(tr);
            //tr = tr + '</tr>';
            //$('#levelBox').html(tr);



        },

        error: function () { alert('error'); }
    });

I have a for loop inside first ajax call and inside that for loop i have ajax call for each iteration. I want the code to execute the following way:

First ajax call returns list of data, for each data I need to create a table and fetch another list of data and bind to the same table and for second iteration i need to create another table and fetch another list of data and bind it to the newly created table.

EXPECTED RESULT

Now whats happening is, first ajax call returns a list of data and for each data, tables are created. Later the other list of data is fetched and it binds it to one table alone.

If i make async as false, the result is as follows: Async False results

Can someone help me?

the word is closure. Have a look at [this post](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Anupam, May 19 '16 at 12:09

score 0 · Answer 1 · edited May 19 '16 at 12:44

0

Use async: false in the ajax call

$.ajax({
   type: "GET",              
   url: URI1, //URI             
   async: false,          
   contentType: "application/json; charset=utf-8",    
   dataType: "json",      
   success: function (Json1) {  
   ... // your code   
   }  
});

edited May 19 '16 at 12:44

Dhara Parmar

8,021
1
16
27

answered May 19 '16 at 12:10

vivek

9
2

Anupam · Answer 2 · 2016-05-19T12:25:44.593

0

You should use a closure

for (var i = 0; i < arr.length; i++) {
  (function(i) {
    // your stuff
  })(i);
}

or $.each() which creates a closure for you

So in your case

for (var i = 0; i < Json.length; i++) {
     (function(i) {
        // your stuff
      })(i);
}

edited May 19 '16 at 12:25

answered May 19 '16 at 12:16

Anupam

7,966
3
41
63

score -1 · Answer 3 · answered May 19 '16 at 12:11

-1

The 'A' in AJAX stands for 'asynchronous' which means your looped AJAX calls will be fired sequentially. If you need to wait on your 'success' callback to complete before triggering the next request, you can set the 'async' option to false.

$.ajax({
    async: false,
    // ...
});

answered May 19 '16 at 12:11

Bruno Lange

720
8
12

If i make async as false, i am getting the result in the following way: see the above post for image – Harshitha K May 19 '16 at 12:15

Jquery ajax call inside another ajax call is not working as expected inside a for loop

3 Answers3