Console log undefined after fetching api in Vue

Question

When fetching from an API (3rd party, I authenticate and get the data in my Laravel Controller) I get 'undefined' in the console. I want to store the data in a Vue component.

I tried a bunch of different things, including a get instead of fetch, but this also logged undefined. I did some research and read about arrow functions but I am not using an arrow function.

data() {
    return {
        tickets: [],
    };
},

created() {
    this.fetchTickets();
},

methods: {
    fetchTickets() {
        fetch('/api')
        .then(res => {
            this.tickets = res.json;
        })
        .then(res => {
            console.log(res.json);
        }) 
    }
}

So, what I want is the collection made out of the get request I send to a 3rd party API in PHP which is returned to the route /api, stored in my Vue component. Now it just logs undefined.

EDIT Backend request in PHP

 $response = $client->get('v1/tickets/search.json', [
        'query' => ['statuses[]' => 'active', 'assignedTo[]' => 314955, 
        'sortDir' => 'desc', 'sortBy' => 'updatedAt']
    ]);

    $json = (string)$response->getBody()->getContents();
    $decoded = json_decode($json, true);
    return collect($decoded);

Route: Route::get('/api', 'ApiController@getTickets',);

Possible duplicate of Why is value undefined at .then() chained to Promise? — Ivar
– Ivar, Commented Apr 9, 2019 at 12:22

Ashish · Accepted Answer · 2019-04-09 12:26:36Z

2

fetch returns a promise containing the response res. (This is just an HTTP response, not the actual JSON.)

To extract the JSON body content from the response, we use the json() method

You can read more about using fetch.

fetchTickets() {
    fetch('/api')
    .then(res => res.json()) //returning a promise To extract the JSON body content from the response
    .then(resJson => {
        this.tickets = resJson
        console.log(resJson);
    }) 
}

edited Apr 9, 2019 at 12:26

answered Apr 9, 2019 at 12:19

Ashish

4,3801 gold badge19 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scott van Duin Over a year ago

The information I got from the API now is properly logged in the console! Thank you!

Scott van Duin Over a year ago

Oh I have one more question, how does resJson get defined? Does .then just pass on the contents of res => res.json()?

Zooly · Accepted Answer · 2019-04-09 12:23:49Z

2

Return your data before going in second promise.

fetchTickets() {
    fetch('/api')
    .then(res => {
        this.tickets = res.json;
        return res;
    })
    .then(res => {
        console.log(res.json);
    });

edited Apr 9, 2019 at 12:23

answered Apr 9, 2019 at 12:16

Zooly

4,7974 gold badges40 silver badges55 bronze badges

2 Comments

Scott van Duin Over a year ago

It still says undefined in console.log for some reason

Ashish Over a year ago

@ScottvanDuin Explained the logic in answer. In first then you need to return res.json() then you will get json object in next then.

Karim · Accepted Answer · 2019-04-09 12:28:24Z

2

add the return statement in the first promise

fetch('/api')
  .then(res => {
      return res.json();
   })
   .then(tickets => {
     // tickets is a local variable scoped only here
     console.log(tickets);
   })

edited Apr 9, 2019 at 12:28

answered Apr 9, 2019 at 12:16

Karim

8,6823 gold badges27 silver badges36 bronze badges

6 Comments

Scott van Duin Over a year ago

Tickets isn't defined anywhere, this just errors: "app.js:1792 Uncaught (in promise) ReferenceError: tickets is not defined at app.js:1792"

Karim Over a year ago

ticket is a local variable in the second promise scope, you shoudnt' make it globally available because you're relying on some async code to populate the value

Scott van Duin Over a year ago

But then how exactly would this be stored in the data() of the component? (I'm a noob to vue and javascript on this level)

Karim Over a year ago

what's the purpose of the data() method, can't you just pass tickets when you call data(tickets) ?

Scott van Duin Over a year ago

This way I can mount a prop that will be passed on to a different component, I will be using the data from the API more than once, so I dont want to be fetching individually in each component

|

Collectives™ on Stack Overflow

Console log undefined after fetching api in Vue

3 Answers 3

2 Comments

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related