child ajax function is getting executed later

Question

I am making AjaxCall2 in AjaxCall1' Success function. But my AjaxCall2 is getting executed last after the ajaxcall1 get executes.Can anyone suggest me any another way to do it?

<script>

    $(document).ready(function () {
        var link;
        $.ajax({
            url: 'https://management.azure.com/subscriptions/ace9d0b5-941a-4c2d-b835-90ac43636f18/providers/Microsoft.Compute/virtualMachines?api-version=2017-12-01',
            method: 'GET',
            headers: { 'Authorization': 'Bearer @TempData["token"]'},
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
                var t = "<thead><tr><td>VM ID</td><td>VM Name</td><td>Location</td> <td>OSType</td><td>Type</td><td>bootDiagnostics Status</td></tr ></thead ><tbody>";
                for (var i = 0; i < result.value.length; i++) {

                   // var net = GetNetworkData("fklnds");
                    link = result.value[i].properties.networkProfile.networkInterfaces[0].id;
                    alert(link);
                    t += "<tr><td>"
                        + result.value[i].properties.vmId
                        + "</td>"
                        + "<td>" + result.value[i].name
                        + "</td>" +
                        "<td>" + result.value[i].location
                        + "</td>" +
                        "<td>" + result.value[i].properties.storageProfile.osDisk.osType
                        + "</td>"
                        + "<td>" + result.value[i].type
                        + "</td>"
                        + "<td>" + result.value[i].properties.diagnosticsProfile.bootDiagnostics.enabled
                        + "</td>"
                        + "<td>" + GetNetworkData("test") +
                         "</td></tr>";

                 

                }

                t += "</tbody>";
                $("#vmtab").html(t);
                alert("Success");
            },
            
            error: function () {

                alert("error");
                var s = "<table><tr><td>asjklahs</td>" +
                    "<td>sdskjf*</td></tr>";
                $("#target").html(s);
            }


        });
        //get network data

    });
    var GetNetworkData = function (dass)
    {
            var op;
            $.ajax({
                url: 'https://management.azure.com/subscriptions/ace9d0b5-941a-4c2d-b835-90ac43636f18/resourceGroups/Jmeter-RG/providers/Microsoft.Network/networkInterfaces/jmetervm896?api-version=2015-06-15',
                method: 'GET',
                headers: { 'Authorization': 'Bearer @TempData["token"]' },
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    op = data.properties.ipConfigurations[0].properties.privateIPAddress;
                    alert(op);
                },
                error: function () {
                    alert("Network error");
                    return null;

                }

            })


        }

</script>

**I am making AjaxCall2 in AjaxCall1' Success function. But my AjaxCall2 is getting executed last after the ajaxcall1 get executes.Can anyone suggest me any another way to do it? **

that is correct right `GetNetworkData` get executed after you first ajax call as you are calling it from success function of call 1 — Pranay Rana, Jun 06 '18 at 09:50
so is there any other way to call the second ajax function inside the first ajax function which execute while the first function get executed?? — Verma Ashish, Jun 06 '18 at 10:07
ok , then you must need to compete request 1 and then start request 2..how ever i suggest you to have look to RXJS it provide function like mergemap and you can do code for depedant request easily in that — Pranay Rana, Jun 06 '18 at 10:14

child ajax function is getting executed later

0 Answers0