Fetch data to variable

Question

I'm trying to get data from a API to a variable for Geocoding, I use fetch to get API response like this:

var requestOptions = {
    method: 'GET',
  };
  
  fetch("https://api.geoapify.com/v1/geocode/search?text=38%20Upper%20Montagu%20Street%2C%20Westminster%20W1H%201LJ%2C%20United%20Kingdom&apiKey=${MYKEYAPI}", requestOptions)
    .then(response => response.json())
    .then(result =>  console.log(result))
    .then(data=>{jsonData=data;})
    .catch(error => console.log('error', error));

(In my code I use my actual keyAPI)

I need to get the data so I can get the latitude and longitude in the following lines, but because fetch is a promise, I'm unable to add it to a variable. The values appear in browser console.

How can I add it to a variable, I have seen that some people use async I tried this way:

async function fetchText() {
    let response = await fetch("https://api.geoapify.com/v1/geocode/search?text=38%20Upper%20Montagu%20Street%2C%20Westminster%20W1H%201LJ%2C%20United%20Kingdom&apiKey=${MYKEYAPI}", requestOptions)
        .then(response => response.json())
        .then(result =>  console.log(result))
        .then(data=>{jsonData=data;})
        .catch(error => console.log('error', error));
    let data = await response.text();
    console.log(data);
}
fetchText();

But it gives:

"Uncaught (in promise) TypeError: Cannot read properties of undefined"

My intent with await:

async function funcionAsincrona(){
    const responses = await fetch("https://api.geoapify.com/v1/geocode/search?text=38%20Upper%20Montagu%20Street%2C%20Westminster%20W1H%201LJ%2C%20United%20Kingdom&apiKey=${MYKEYAPI}", requestOptions)
      .then(response => response.json())
      .then(result =>  console.log(result))
      .catch(error => console.log('error', error));
      return responses;
  }
let responses=funcionAsincrona();

but responses is like this:

Promise {}[[Prototype]]:... "Promise"[[Prototype]]: Object[[PromiseState]]: "fulfilled"[[PromiseResult]]: undefined

How can I make it work?

If you have access to `await` there's no need for all this `then` nonsense. Just `await` for each step! — tadman, Jan 29 '23 at 20:41
`await` should resolve any promises it encounters along the way. It shouldn't return a bare Promise. Note that if you unravel this and `await` each step of the way, your error will point at *precisely* the problem, not the whole promise chain. — tadman, Jan 29 '23 at 20:48
Your callback `response=>console.log(response)` does not return anything. Therefore the following `.then()` in the chain will not have anything to process. — Carsten Massmann, Jan 29 '23 at 20:51
You can store the result of the fetch call in a variable by declaring a variable before the call, then assigning the result of the fetch call to it: let jsonData; async function fetchText() { let response = await fetch("https://api.geoapify.com/v1/geocode/search?text=38%20Upper%20Montagu%20Street%2C%20Westminster%20W1H%201LJ%2C%20United%20Kingdom&apiKey=${MYKEYAPI}", requestOptions); let data = await response.json(); console.log(data); jsonData = data; } — Ben Leonard, Jan 29 '23 at 20:52
Even if I add .then(data=>{jsonData=data;}) before, console gives that data is undefined — Iria, Jan 29 '23 at 20:54
Ben Leonard answer worked. Thanks to all of you for your help :D — Iria, Jan 29 '23 at 21:03

score 0 · Answer 1 · answered Jan 29 '23 at 20:49

0

I may be wrong, but it seems to me that in this

line let data = await response.text();

await is superfluous

answered Jan 29 '23 at 20:49

dumooon

1
2

Fetch data to variable

1 Answers1