pass a url variable with fetch api

Question

I'm trying to pass an url variable through the api fetch but I can't get any results back. Thanks, I am a bit of a newbie to Javascript.

//Get IP address
fetch('https://extreme-ip-lookup.com/json/')
  .then((eip) => {
    return eip.json();
  }).then((eip) => {
    document.getElementById('ip').value = eip.query;
    var myip = document.getElementById('ip').value;
    var url = "https://api.pray.zone/v2/times/today.json?ip=" + myip;
  })

//Get City
fetch(url)
  .then((res) => {
    return res.json();
  }).then((res) => {
    document.getElementById('city').value = res.results.location.city;
  })

I can get ip address but not city.

`fetch` is a Promise, so you should be able to return the url value in the method `then`. Or move the second `fetch` right after to the url assignment — herodrigues, Feb 14 '19 at 21:52
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Matthew Herbst, Feb 14 '19 at 21:53

score 2 · Accepted Answer · answered Feb 14 '19 at 21:53

url is only visible inside the .then callback, and doesn't even exist when you make the second call to fetch.

Call the second fetch in there and return the promise that fetch returns so that you can chain them properly:

//Get IP address
fetch('https://extreme-ip-lookup.com/json/')
  .then((eip) => {
    return eip.json();
  })
  .then((eip) => {
    document.getElementById('ip').value = eip.query;
    var myip = document.getElementById('ip').value;
    return fetch("https://api.pray.zone/v2/times/today.json?ip=" + myip);
  })
  //Get City
  .then((res) => {
    return res.json();
  })
  .then((res) => {
    document.getElementById('city').value = res.results.location.city;
  })

Related: Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

That's great! It works perfect. You're right, it was inside the '.then' callback. — Bob, Feb 14 '19 at 22:00

score 0 · Answer 2 · answered Feb 14 '19 at 21:58

Your code runs asynchronously and you are calling the fetch before you get the url.

//Get IP address
fetch('https://extreme-ip-lookup.com/json/')
  .then((eip) => {
    return eip.json();
  }).then((eip) => {
    document.getElementById('ip').value = eip.query;
    var myip = document.getElementById('ip').value;
    var url = "https://api.pray.zone/v2/times/today.json?ip=" + myip;
    fetch(url)
      .then((res) => {
        return res.json();
      }).then((res) => {
        document.getElementById('city').value = res.results.location.city;
      })
});

score 0 · Answer 3 · answered Feb 14 '19 at 22:32

The url variable is not in scope so practically you are passing undefined into the second fetch... You can easily put the second fetch before the closing of the first fetch or you define the url variabl outside of the first fetch and maybe assign it to an empty string then assign the url value or the url after you have built it before closing the first fetch. That's if you want to keep the fetch APIs saparated the way you have it now

pass a url variable with fetch api

3 Answers3