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
– herodrigues, Commented Feb 14, 2019 at 21:52
Possible duplicate of How do I return the response from an asynchronous call? — Matthew Herbst
– Matthew Herbst, Commented Feb 14, 2019 at 21:53

Felix Kling · Accepted Answer · 2019-02-14 21:53:22Z

2

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

answered Feb 14, 2019 at 21:53

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bob Over a year ago

That's great! It works perfect. You're right, it was inside the '.then' callback.

R. C. W. · Accepted Answer · 2019-02-14 21:58:31Z

0

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;
      })
});

answered Feb 14, 2019 at 21:58

R. C. W.

965 bronze badges

Comments

Monday A Victor · Accepted Answer · 2019-02-14 22:32:35Z

0

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

answered Feb 14, 2019 at 22:32

Monday A Victor

4717 silver badges16 bronze badges

Collectives™ on Stack Overflow

pass a url variable with fetch api

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related