How to return a value from a Fetch Api

Question

I have the following code and it executes perfectly.

var website = "youtube.com"
const getViews = (website) => {
  fetch("/api?Action=TrafficHistory&Range=1&Output=json&ResponseGroup=History&Url=" + website, {
    headers: {
      "X-Api-Key": "hidden"
    }
  })
  .then((res) => res.json())
  .then((data) => JSON.stringify(data))
  .then((data) =>{
    let parsedData = JSON.parse(data)
    console.log(parsedData)
  })
  
}

getViews(website)

Instead of console logging the data I wanted to return the variable parsedData that holds the data. I tried modifying the like so but it gives me a value of undefined.

var website = "youtube.com"
const getViews = (website) => {
  fetch("/api?Action=TrafficHistory&Range=1&Output=json&ResponseGroup=History&Url=" + website, {
    headers: {
      "X-Api-Key": "hidden"
    }
  })
  .then((res) => res.json())
  .then((data) => JSON.stringify(data))
  .then((data) =>{
    let parsedData = JSON.parse(data)
    return parsedData
  })
  
}
let holdData = getViews(website)
console.log(holdData)

What can I do to fix this?

Your `getViews` doesn’t return anything. `return parsedData` isn’t returned anywhere as the Promise chain simply ends there and the return value isn’t used. — Sebastian Simon, Aug 26 '21 at 05:05
If API's response is in JSON format, why do you use `JSON.stringify` and then `JSON.parse`? — AbsoluteBeginner, Aug 26 '21 at 08:35

score 1 · Answer 1 · answered Aug 26 '21 at 05:08

1

Return the promise chain as well

const getViews = (website) => {
  return fetch("/api?Action=TrafficHistory&Range=1&Output=json&ResponseGroup=History&Url=" + website, {
    headers: {
      "X-Api-Key": "hidden"
    }
  })
  .then((res) => res.json())
  .then((data) => JSON.stringify(data))
  .then((data) =>{
    let parsedData = JSON.parse(data)
    return parsedData
  })
  
}

answered Aug 26 '21 at 05:08

Bugs bunny

137
1
4

This won't return the variable; it will return a promise. Call to `getViews` function will either need to be _awaited_ or call `then` method on it: `getViews(...).then(data => { ... })`. In short, OP can't do what they are trying to do - at-least not reliably. – Yousaf Aug 26 '21 at 05:15
Oh yeah right but this is usually what you get unless you use some sort of promise wrapper – Bugs bunny Aug 26 '21 at 05:22

How to return a value from a Fetch Api

1 Answers1