Why fetch JavaScript in Laravel always return empty value?

Question

I'm fetching the API from the system itself inside the blade template view. But I always return {}.

fetch("http://mylaravelapp.com/api/list")
.then(response => {
     console.log(JSON.stringify(response));
});

I already set CORS header inside my API using this library, https://github.com/barryvdh/laravel-cors.

did you check on browser network section, did you get the result from server-side? — Gulshan S
– Gulshan S, Commented Sep 23, 2019 at 11:42
The fetch promise is axios? I'm asking because you need to set csrf-token so have to be certain that has been set. — Sunday Johnson
– Sunday Johnson, Commented Sep 23, 2019 at 11:44
@SundayJohnson - "The fetch promise is axios?" Not if it's the built-in fetch, no. — T.J. Crowder
– T.J. Crowder, Commented Sep 23, 2019 at 12:00

T.J. Crowder · Accepted Answer · 2019-09-23 12:08:27Z

6

There are a couple of problems:

You're not checking that the HTTP request succeeded. Lots of people make this mistake, it's a flaw in the fetch API design, more here on my anemic little blog. You need to check response.ok.
response is an object with no own, enumerable properties, so JSON.stringify will return "{}" for it. To get the response, you must read the response body via one of the response object's methods, such as text, json, arrayBuffer, formData, or blob.

So for instance:

fetch("http://mylaravelapp.com/api/list")
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.text(); // or .json(), .arrayBuffer(), ...
})
.then(data => {
    console.log(JSON.stringify(data));
})
.catch(error => {
    console.error(error.message);
});

edited Sep 23, 2019 at 12:08

answered Sep 23, 2019 at 11:45

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Vishal Bondre · Accepted Answer · 2019-09-23 11:45:12Z

-2

Try to return JSON Data and use JSON dataType in your Fetch request

answered Sep 23, 2019 at 11:45

Vishal Bondre

621 silver badge6 bronze badges

Collectives™ on Stack Overflow

Why fetch JavaScript in Laravel always return empty value?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related