use the fetch api to send a url variable

Question

use the fetch api to send a url variable

I'm struggling to pass a URL variable through the API fetch and I can't seem to retrieve any results. As a newcomer to Javascript, any help is greatly appreciated.

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

While I am able to obtain the IP address successfully, retrieving the city information seems to be posing a challenge for me.

javascript json

Answer 1

Answer №1

url is only accessible within the .then callback and ceases to exist upon calling fetch for the second time.

To properly chain the fetch calls, make sure to call the second fetch inside that callback and return the promise it generates:

//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

Answer 2

url is only accessible within the .then callback and ceases to exist upon calling fetch for the second time.

To properly chain the fetch calls, make sure to call the second fetch inside that callback and return the promise it generates:

//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

Answer 3

Answer №2

Your script is asynchronous and you're triggering the fetch function before obtaining the URL.

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

Answer 4

Your script is asynchronous and you're triggering the fetch function before obtaining the URL.

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

Answer 5

Answer №3

When the url variable is not in scope, you end up passing undefined into the second fetch call. To rectify this issue, consider moving the second fetch before the closing of the first fetch. Alternatively, you can define the url variable outside of the first fetch and initialize it to an empty string. Then, assign the actual url value or build the url before the first fetch closes. This approach allows you to maintain separation between the fetch APIs as you currently have them structured.

Answer 6

When the url variable is not in scope, you end up passing undefined into the second fetch call. To rectify this issue, consider moving the second fetch before the closing of the first fetch. Alternatively, you can define the url variable outside of the first fetch and initialize it to an empty string. Then, assign the actual url value or build the url before the first fetch closes. This approach allows you to maintain separation between the fetch APIs as you currently have them structured.

use the fetch api to send a url variable

Answer №1

Answer №2

Answer №3

Similar questions

Creating an 8-bit grayscale JPEG image using HTML5 and encoding it from a canvas source

The Angular ViewportScroller feature appears to be malfunctioning in the latest release of Angular,

Vue - Display components next to sidebar

Building a hierarchical object structure from an array

Is the "Illegal invocation" error popping up when using the POST method in AJAX?

Tips for incorporating various color schemes into all sides of a shape generated through the extrude geometry feature in three.js

``In a WordPress plugin, a SELECT query for the database (utilizing WordPress, PHP, and MySQL) is

Encountering issues with subclass properties post JSON serialization crash

Sharing a Twitter thread using Twit library with Node.js

Guide on capturing JSON objects when the server and client are both running on the same system

The error message "Invalid JSON payload. Root element needs to be a message" is returned when using the Google Sheets API with python 2.7

How can default props be set for a nested object in Vue?

Concise way to add or insert an element into an array, at a specific property of an object

Saving the current state of a member variable within an Angular 2 class

Experimenting with a custom AngularJS filter designed to extract numerical values from a chunk of text

Storing executable scripts in HTML5 LocalStorage allows for the dynamic creation

JSON object containing elements with dash (-) character in their names

What causes the console.log function to behave in this manner?

Showing chosen checkbox information using jQuery ajax

Preserving the most recent choice made in a dropdown menu