Axios - How to read JSON response?

33
votes

Axios 0.17.1

.then(function (response) {
                console.log(response);
                //console.log(response.status);
                //It is an error -> SyntaxError: Unexpected token u in JSON at position 0 
                console.log(JSON.parse(response.data.error));
                console.log(response.data.error); //undefined.

The console.log of response is

{data: "{"error":"Name must be entered with more than one … NULL↵
["isPipe":protected]=>↵ NULL↵ }↵}↵", status: 203, statusText: "Non-Authoritative Information", headers: {…}, config: {…}, …} config : {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …} data : "{"error":"Name must be entered with more than one character."}object(Slim\Http\Response)#32 (5) {↵ ["status":protected]=>↵ int(200)↵ ["reasonPhrase":protected]=>↵ string(0) ""↵ ["protocolVersion":protected]=>↵ string(3) "1.1"↵ ["headers":protected]=>↵ object(Slim\Http\Headers)#33 (1) {↵
["data":protected]=>↵ array(1) {↵ ["content-type"]=>↵
array(2) {↵ ["value"]=>↵ array(1) {↵ [0]=>↵
string(24) "text/html; charset=UTF-8"↵ }↵
["originalKey"]=>↵ string(12) "Content-Type"↵ }↵ }↵ }↵ ["body":protected]=>↵ object(Slim\Http\Body)#31 (7) {↵
["stream":protected]=>↵ resource(59) of type (stream)↵
["meta":protected]=>↵ NULL↵ ["readable":protected]=>↵ NULL↵
["writable":protected]=>↵ NULL↵ ["seekable":protected]=>↵
NULL↵ ["size":protected]=>↵ NULL↵ ["isPipe":protected]=>↵
NULL↵ }↵}↵" headers : {content-type: "application/json;charset=utf-8"} request : XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} status : 203 statusText : "Non-Authoritative Information" proto : Object

JSON.parse(response.data) as well as response.data.error -> Both are giving error. How can i read the data?

Slimframework 3. 

$data = array('error' => 'Name must be entered with more than one character.');
        $newResponse = $response->withJson($data, 203);
        return $newResponse;
6
javascriptreactjsslimaxios
SyntaxError: Unexpected token u in JSON at position 0 – Mahesh
Check console.log(response.data) and see what the format is of the data object. Looking at your example output it looks like there is too many quotes " - data: "{"error":"Name must be entered... - this: "{"error":" looks strange – Nope
Verify whether the response you receinved is a valid JSON. If it is valid, axios will parse it to a JSON object. otherwise it will return you a plain string object. – Karthikeyan

6 Answers

50
votes

In Axios responses are already served as javascript object, no need to parse, simply get response and access data.

13
votes

Assuming the response from the server looks like this:

{"token": "1234567890"}

Then in Axios you can access it like this:

console.log( response.data.token )
3
votes

I had a similar format response as the one in console log and my issue was that my .json file wasn't properly formatted. I was missing a comma. Post your json file to have a look.

2
votes

axios by defualt convert response to JSON, you must use response.data instead of response

export const addPosts = () => async (dispatch) => {
await axios('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => dispatch({type: postActionTypes.POSTS, payload: response.data}))}
2
votes

As already written, Axios already returns JSON by default. Just use response.data as simple JS object.

However, following insight might help others: I had an issue that Axios returned the response as a string. When investigated I discovered that the server returned an invalid JSON (it was a static file server). When fixed the JSON format, Axios used JSON instead of string again.

2
votes

you can simply get it as following,

ex:

{
    "terms": {

        "title": "usage",

        "message": "this is the usage message"

    }

}

when the response look like this,you can get it using "response.data",and so on....

.then(response => 
        console.log( response.data.terms.message)

Cheers !