How to make consecutive API calls in JavaScript with variables

Question

Sorry if this is kind of a "noob" question but I'll ask anyway. :)

I have a HTML page and a JavaScript file where I make two API calls to get train trip information. You are filling out the city you want to travel from and the first API call returns an ID for that location. The the second API call is supposed to use this received ID to get you up to six upcoming departures from that location to a preset destination.

The first API call works with the variable cityname being passed from the input field from the HTML page and in the log I get an ID number back. That is shown in the console logs. Unfortunately I'm not allowed to provide a picture (too low reputation :)).

The second API call always fails since the variable trainoriginid always ends up empty (I guess that this is actually a variable scope issue). I have tried to use the same technique on the second API call as in the first call, as you can see in the commented "var url" line, but no matter where I try to declare or set the trainoriginid it ends up empty. How am I to pass the result from the first API call to the second? All info is appreciated.

This line is from the error message:

GEThttps://api.resrobot.se/v2.1/trip?format=json&originId=&destId=740098037&passlist=true&showPassingPoints=true&accessId

If I use the call with the "const url" line everything works so there you can see what the url should look like.

The (not complete) JavaScript code looks like this:

let reqBtn          = document.querySelector('.request-btn');
let reqInput        = document.querySelector('.request-input');
let respResultDiv   = document.querySelector('.response-result');
let trainoriginid = '';

reqBtn.addEventListener('click', event => {
    let cityName = reqInput.value;
    console.log(cityName);

    var citylookup = `https://api.resrobot.se/v2.1/location.name?input=${cityName}&format=json&accessId=[APIKey]`;
    axios.get(citylookup).then(searchresponse => {
        console.log(searchresponse.data);
        
        let searchdata = searchresponse.data;
        trainoriginid = searchdata.stopLocationOrCoordLocation[0].StopLocation.extId;
        
        console.log(trainoriginid);
        
        });


    //var url = `https://api.resrobot.se/v2.1/trip?format=json&originId=${trainoriginid}&destId=740098037&passlist=true&showPassingPoints=true&accessId=[APIKey]`;
     const url = `https://api.resrobot.se/v2.1/trip?format=json&originId=740000008&destId=740098037&passlist=true&showPassingPoints=true&accessId=[APIKey]`
    
    axios.get(url).then(response => {
        console.log(response.data.Trip);
        let data = response.data.Trip;

NOTE! After following the link above and and doing some testing - using callbacks solved my problem. Just for reference the final solution looks like this:

reqBtn.addEventListener('click', event => {
    let cityName = reqInput.value;
    respResultDiv.textContent = '';
        
    console.log(cityName);

    getStationId(cityName, getTrainList)


});

function getStationId(cityNameinput, callback){
    var citylookup = `https://api.resrobot.se/v2.1/location.name?input=${cityNameinput}&format=json&accessId=[API-key]`;
    var originid;
    
    axios.get(citylookup).then(searchresponse => {
        console.log(searchresponse.data);
        
        let searchdata = searchresponse.data;
        originid = searchdata.stopLocationOrCoordLocation[0].StopLocation.extId;
        
        console.log(originid);
        
        callback(originid);

        });

}


function getTrainList(trainoriginid){
    console.log(trainoriginid);

    
    var url = `https://api.resrobot.se/v2.1/trip?format=json&originId=${trainoriginid}&destId=740098037&passlist=true&showPassingPoints=true&accessId=[API-key]`;

    axios.get(url).then(response => {
        console.log(response.data.Trip);
        let data = response.data.Trip;
        
        [Do a bunch of stuff with the result here]
        
    });
}

My problem was solved using callbacks like in the link above the question - just as a pointer if someone else has the same question. — thzman, May 25 '22 at 06:34

score 0 · Answer 1 · answered May 24 '22 at 06:26

In your example above, your second lookup call needs to be inside the "then" response method of the first lookup. You are calling both inline at the same time, so the second call will always use the empty "trainoriginid" as it is not set yet. Also, in your example above, I can not see you actually applying "${trainoriginid}" to the second url.

In this case, you do not need to make the second url a "const" as it is a one use deal. It is probably best to use "let" (and apply the "${trainoriginid}").

As a side note, axios is awaitable, so you could use await on the first call (and make the click method async), then you could have both lookups inline like that, but it is probably easier to just move the second call inside the the response of the first.

How to make consecutive API calls in JavaScript with variables

1 Answers1