How to get the actual data from a response? I get undefined

Question

I am trying to get data from the yelp api,

I have a fetching function that looks like this:

export function fetchRestaurants (term) {
    const endpoint = `businesses/search?term=${term}&location=NYC`

    return fetch(endpoint, {
      headers: new Headers({
        'Authorization': 'Bearer '+'oSJvaTmFtYVCEJcMsLFA4uRljDOILtEfp0sTWflSWclozapMP1rCZ6uttKPOoYnrdUGcTXI0ztOf3rTPVSBRa1JjngqcoTKD30YUp7yKxhZCNzS4bsZV_DqzzkAwXXYx',
      }), 
    })
      .then((res) => {
        console.log(res)
        res.json()
      })
      .then((data) => {
        console.log(data)
        // this is undefined!
        return data
      })
  }

the respose is 200 on the first then and looks like this:

Response {type: "basic", url: "http://localhost:3000/businesses/search?term=pizza&location=NYC", redirected: false, status: 200, ok: true, …}
type: "basic"
url: "http://localhost:3000/businesses/search?term=pizza&location=NYC"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers {}
body: (...)
bodyUsed: true

But then i try to do a .json on it on the second then, and when i try to log it its undefined.

Any ideas on how to get the actual data? Thanks

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Heretic Monkey, Feb 06 '20 at 15:05
@HereticMonkey — No, because the question says that `data` is undefined in the second `then()` callback. — Quentin, Feb 06 '20 at 15:07
@EugenSunic — They **aren't** returning `res.json()`, that is the error. — Quentin, Feb 06 '20 at 15:08
@Quentin Even if they return `res.json()`, the return value of `fetchRestaurants` will still be `undefined` and the duplicate will apply. — Heretic Monkey, Feb 06 '20 at 15:10
@Quentin you obviously missed what I said, I said in addition to the non-returning promise check for errors also... throw if exist if not then ()=>res.json() — EugenSunic, Feb 06 '20 at 15:19

silencedogood · Accepted Answer · 2020-02-06T15:10:43.993

2

The first .then callback function needs to return the res.json() Like this:

.then((res) => {
    console.log(res)
    return res.json()
  })

edited Feb 06 '20 at 15:10

answered Feb 06 '20 at 15:06

silencedogood

3,209
1
11
36

no because the second one which is called `data` in my example is undefined.. so i cant call .json on undefined. – Feb 06 '20 at 15:09
1

@giorgiomartini — `data` is undefined in the second `then` **because** you didn't return anything from the first `then` (which this answer tells you to correct). – Quentin Feb 06 '20 at 15:09
1

That's because you didn't return anything in the previous callback in the promise chain... – silencedogood Feb 06 '20 at 15:10
@silencedogood if you edit your answer to say that i needed to return the value on the FIRST then ill accept it,, thx – Feb 06 '20 at 15:12
@giorgiomartini — It has `res.json` in it. The first one has `res.json` in it. The second one doesn't. It **shows** that it is talking about the first `then` already. – Quentin Feb 06 '20 at 15:13

How to get the actual data from a response? I get undefined

1 Answers1