进行嵌套的ajax调用

Question

I am trying to make a HN clone with vanilla JS.

JS CODE:

var apiResult = document.getElementById("apiResult");

function apiContent() {
var url_end = ' https://hacker-news.firebaseio.com/v0/topstories.json? 
print=pretty';
var apiCall = new XMLHttpRequest();
var links = [];

apiCall.onload = function() {
    if(this.status == 200) {
        var apiData = JSON.parse(apiCall.responseText);

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

            var url = 'https://hacker-news.firebaseio.com/v0/item/' ;
            var c_url = apiData[i] + '.json?print=pretty';
            var final_url = url + c_url;
            links.push(final_url);
        }
            // console.log(links);

            for(var j = 0; j < links.length; j++) {
                var a = links[j];
                var secondRequest = new XMLHttpRequest();
                secondRequest.onload =  function() {
                var secondData = JSON.parse(secondRequest.responseText);
                console.log(secondData);
            }
            secondRequest.open('GET', a, true);
            secondRequest.send();
            }       
    }
    else {
        console.log('Unable to fetch data');
    }
}
apiCall.open("GET", url_end, true);
apiCall.send();


}

The first api call 'url_end' gives the ID of the top 500 stories, it just returns the ID and nothing else. So to fetch the content corresponding to the story ID i'm making an another AJAX call but this time the url is updated with the ID but its not working.

How do I make this work??

Answer 1

I have created the sample example. You need a closure to call multiple ajax inside the for the loop. Sample JSON hosted on http://jsonstore.online Documents: http://jsonstore.online/#!/documentation.

WORKING JS CODE:

var apiResult = document.getElementById("apiResult");
function apiContent() {
var url_end = 'https://api.jsonstore.online/api/PsrWFAEwRVWXXU9y/cities';
var apiCall = new XMLHttpRequest();
var links = [];
apiCall.onload = function() {
    if(this.status == 200) {
        var apiData = JSON.parse(apiCall.responseText);
        for( var i = 0; i < apiData.length; i++){
            var final_url = 'https://api.jsonstore.online/api/PsrWFAEwRVWXXU9y/cities?id='+apiData[i].id ;
            links.push(final_url);
        }
        console.log(links); // Print Link Array
        
        for(var j = 0; j < links.length; j++) {
            (function(a){
              let secondRequest = new XMLHttpRequest();
              secondRequest.onload =  function() {
                let secondData = JSON.parse(secondRequest.responseText);
                console.log(secondData);
              }
              secondRequest.open('GET', a, true);
              secondRequest.send();
           })(links[j]);
        } 
        
    }
    else {
        console.log('Unable to fetch data');
    }
}
apiCall.open("GET", url_end, true);
apiCall.send();
}
apiContent();

</div>