0

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',);

Scott van Duin
  • 81
  • 1
  • 12
  • 2
    You forgot to return from your first then `return res` – Ruan Mendes Apr 09 '19 at 12:14
  • 1
    Possible duplicate of [Why is value undefined at .then() chained to Promise?](https://stackoverflow.com/questions/44439596/why-is-value-undefined-at-then-chained-to-promise) – Ivar Apr 09 '19 at 12:22

3 Answers3

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);
    });
Zooly
  • 4,736
  • 4
  • 34
  • 54
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);
   })
Karim
  • 8,454
  • 3
  • 25
  • 33
  • Tickets isn't defined anywhere, this just errors: "app.js:1792 Uncaught (in promise) ReferenceError: tickets is not defined at app.js:1792" – Scott van Duin Apr 09 '19 at 12:22
  • 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 – Karim Apr 09 '19 at 12:30
  • 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) – Scott van Duin Apr 09 '19 at 12:32
  • what's the purpose of the data() method, can't you just pass tickets when you call data(tickets) ? – Karim Apr 09 '19 at 13:41
  • 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 – Scott van Duin Apr 09 '19 at 14:22
  • ok then you can set the tickets globally or with maybe a better approach would be using an external state management library – Karim Apr 09 '19 at 14:51
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);
    }) 
}
Ashish
  • 4,206
  • 16
  • 45