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

Tips for displaying JSON in C# using Nancyframework

What is the best way to ensure that a child div can expand to fit within the scrollable area of its parent div

Having trouble closing my toggle and experiencing issues with the transition not functioning properly

Generate an array containing the dates of the past 30 days using Moment.js

Experiencing the "Module not found" issue while incorporating SCSS into React applications

What is the best way to convert this JavaScript iteration function into jQuery?

The body parser is designed to efficiently parse and handle both gzip and json formatted HTTP POST request bodies

Terminate the execution of the process.exec function

Receiving multiple NodeJS Responses through AJAX for a single request

The process of loading and saving extensive data to the local storage of a user's Firefox browser involves extensive reading and writing operations

How to retrieve response cookies using RxJS Ajax

Can we switch the country name to the database name in Jvector?

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

Choose options from an array in AngularJS using the same ng-model for a dropdown menu

Having difficulty completing the text field and submitting it automatically

Certain cases will see success with iPhone jquery/ajax functionality, while others may encounter

Utilizing jqGrid row identifiers and personalized details using JSON dataset

Is there a way to obtain HTML code within a contentEditable DIV?

Receiving Request URL from XMLHttpRequest in PHP

Sending cookies via POST/GET request with Credentials is not functioning