Search jQuery

jQuery Forum

Getting Started

Russell M..

Looping with a couple of ajax calls

in Getting Started • 8 months ago

Hi,

I've got an issue trying to get two ajax calls to loop and work together.

the first ajax call gets the title from a group of items and the second ajax call gets an array of tests.

so I want the web page to show the title and the first set of tests together then the second title and the second set of tests and so on.

Title1

a-test1

b-test2

c-test3

Title2

d-test1

e-test2

f-test3

I just can't seen to get it right.

Thanks

Code below

   for (var i = 0; i < listReleasesid.length; i++) {
      console.log('list releases id ' + listReleasesid[i]);
      var geteachrelease = "https://vsrm.dev.azure.com/" + organization + "/" + projectName + "/_apis/release/releases/" + listReleasesid[i] + "?api-version=5.0";
      console.log('get each release' + geteachrelease);

      $.ajax({
         url: geteachrelease,
         type: "GET",
         dataType: 'JSON',
         async: false,
         crossDomain: true,

         beforeSend: function (xhr3) {
            xhr3.setRequestHeader('Authorization', make_base_auth(username, password));
            xhr3.setRequestHeader('Access-Control-Allow-Headers', '*');
            xhr3.setRequestHeader('Access-Control-Allow-Origin', '*');
            console.log('function xhr3 ok');
         },

         success: function (geteachreleaseResp) {
            var geteachreleaseResults = JSON.stringify(geteachreleaseResp);

            console.log(geteachreleaseResp.id, geteachreleaseResp.name,geteachreleaseResp.environments[0].id, geteachreleaseResp.environments[0].name);
            //for (i in geteachreleaseResp.value) {

   // $('#each_Release_data').append(geteachreleaseResults);
itemtest.length=0;
star = "<h2>"+ geteachreleaseResp.name +"</h2>";
itemtest.push(geteachreleaseResp.name);
itemtest.push(geteachreleaseResp.id);
itemtest.push(geteachreleaseResp.environments[0].id);
itemtest.push(geteachreleaseResp.environments[0].name);
console.log("itentest",itemtest);
environmentid.push(geteachreleaseResp.environments[0].id);

    var getReleaseTests = "https://vstmr.dev.azure.com/" + organization + "/" + projectName + "/_apis/tcm/resultdetailsbyrelease?releaseId=" + itemtest[1] +"&releaseEnvId=" + itemtest[2] + "&publishContext=CD&groupBy=TestRun&%24filter=Outcome+eq+Aborted%2CFailed&shouldIncludeResults=true&queryRunSummaryForInProgress=false";
      console.log( getReleaseTests);
console.log("title",itemtest[0]);
       $.ajax({
         url: getReleaseTests,
         type: "GET",
         dataType: 'JSON',
         async: false,
         crossDomain: true,

         beforeSend: function (xhr3) {
            xhr3.setRequestHeader('Authorization', make_base_auth(username, password));
            xhr3.setRequestHeader('Access-Control-Allow-Headers', '*');
            xhr3.setRequestHeader('Access-Control-Allow-Origin', '*');
            console.log('function xhr3 ok');
         },

         success: function (getReleaseTestsResp) {
            var getReleaseTestsResults = JSON.stringify(getReleaseTestsResp);

getReleaseTestsResp.resultsForGroup.forEach(resultsForGroup=>{
    console.log(
        'ID:', resultsForGroup.groupByValue.id,
        'Name: ', resultsForGroup.groupByValue.name,
        'Completed: ', resultsForGroup.groupByValue.state,
        'Date Ran: ', resultsForGroup.groupByValue.completedDate,
       'Passed: ', resultsForGroup.resultsCountByOutcome.Passed.count,
        'Failed: ', resultsForGroup.resultsCountByOutcome.Failed.count,
'Total Tests: ', (resultsForGroup.resultsCountByOutcome.Passed.count + resultsForGroup.resultsCountByOutcome.Failed.count)
    )

  tests.push("<div class=\"card-body\">"

+ "<h5>" + "Test Name: " + resultsForGroup.groupByValue.name + "</h5>" +
"<h5>" + "Test ID: " + resultsForGroup.groupByValue.id + "</h5>" +
"<h5>" + "Completed: " + resultsForGroup.groupByValue.state + "</h5>" +
"<h5>" + "Passed: " + resultsForGroup.resultsCountByOutcome.Passed.count + "</h5>" +
"<h5>" + "Failed: " + resultsForGroup.resultsCountByOutcome.Failed.count + "</h5>" +
"<h5>" + "Total Tests: " + (resultsForGroup.resultsCountByOutcome.Passed.count + resultsForGroup.resultsCountByOutcome.Failed.count) + "</h5>" +
"</div>")

})

   console.log(getReleaseTestsResults);
   console.log(getReleaseTestsResp.resultsForGroup.groupByValue);

                 } // success
                          }); // ajax close



         } // success
        }); // ajax close


   } // for loop

$('#ryss').append(star);

$('#itemtest_data').append(tests);

end of code

Thanks

Russ

Replies(7)

jakecigar

Re: Looping with a couple of ajax calls

8 months ago

Don’t use a for loop, it does not make individual var(s).

Use .each or .forEach.

Also, don’t use

async: false,

It’s been deprecated for a very long time.

If your "couple" turned into "many", I would use tail recursion from inside the success callback.

JΛ̊KE

Russell M..

Re: Re: Looping with a couple of ajax calls

8 months ago

Ok cool. I saw that async: false was deprecated but I couldn't keep the variables to use them later without it. How do I not use the Async: false and keep the variables to be used later?

Russell M..

Re: Looping with a couple of ajax calls

8 months ago

Could you explain what you mean by individual vars?

Do you mean as it runs through the loop it creates a new var for each item and doesn't push them in to an array? and if you are saying that, do the vars get the same name but with a number added to show they are individual?

or an I totally misunderstanding it. :)

Thanks

Russ

jakecigar

Re: Looping with a couple of ajax calls

8 months ago

You need to rethink your code. You should use async code, and deal with the results inside the success callback. And only there.

for (var i = 0; i < listReleasesid.length; i++) {

var x = listReleasesid[I] ;

}

is actually the same as

var x;

for (var i = 0; i < listReleasesid.length; i++) {

x = listReleasesid[I] ;

}

It causes problems.

listReleasesid.forEach(…) is cleaner.

JΛ̊KE

Russell M..

Re: Looping with a couple of ajax calls

8 months ago

I'm really struggling here, I've changed over to sync from async but I just cannot see the wood through the trees.

there are four api calls and it the last api I'm struggling with.

The code is all relating to Azure DevOps or VSTS, depending on what you call it now.

The first api goes and gets the releasepipelinedefinition id based on the release pipeline definition name.

from this the second call takes place and gets the release name and ID

the third call can then go and get the environment ID

and finally putting that together I can get the test results from each of the releases.

I select the top 5(or up to) and then I want to display it so it shows the release name, id, environment name, environment ID and below it shoulds all the tests for that release.

Then it loops on to the next release and displays the tests for that.

I would really appreciate any help, and Thanks for the help so far Jake.

Attachments

EmptyHTMLFile.html
Size : 1.57 KB Downloads : 143 Download
EmptyJSFile.js
Size : 8.71 KB Downloads : 152 Download

jakecigar

Re: Looping with a couple of ajax calls

8 months ago

I think your variables are out-of-scope. You refer to I which is a for var, by the time the JSON comes back it has already been incremented to the end of the loop.

Use .forEach (native) or .each (jQuery).

JΛ̊KE

watusiware

Re: Looping with a couple of ajax calls

8 months ago

You should spend some time learning about variable scope in Javascript:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

It will help, as well, to learn about closures:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

BTW, setting these headers in your requests is meaningless. They are RESPONSE headers. They only have any meaning when sent from your SERVER.

xhr3.setRequestHeader('Access-Control-Allow-Headers', '*');
xhr3.setRequestHeader('Access-Control-Allow-Origin', '*');

do the vars get the same name but with a number added to show they are individual?

You can imagine that if you wish - it is a flawed analogy - but that's not the way it actually works.

Read up on variable scope.

If you want to accumulate some data from multiple asynchronous Ajax requests into some object or array, make sure you declare the variable(s) in some place where they will be in-scope for all your callbacks. e.g. in some outer block, not inside your loops. And then make sure you don't "hide" your variable(s) by declaring another with the same name(s) inside some inner block.

None of this really has anything to do with jQuery. You are missing some Javascript fundamentals, and should brush-up.

Top Reply

Response title

Attachments

jQuery Forum

Looping with a couple of ajax calls

Replies(7)

Re: Looping with a couple of ajax calls

Re: Re: Looping with a couple of ajax calls

Re: Looping with a couple of ajax calls

Re: Looping with a couple of ajax calls

Re: Looping with a couple of ajax calls

Attachments

Re: Looping with a couple of ajax calls

Re: Looping with a couple of ajax calls

Statistics

Tags

Actions

Related Posts