Unexpected token < in JSON at position 0

Question

If I do curl, the server returns an array of posts objects, like this:

curl http://localhost/api/posts/
[
    {
        "id": 7,
        "target": {
            "body": "This is the body",
            "title": "Airbnb raising a reported $850M at a $30B valuation",
            "user": {
                "first_name": "ben",
                "last_name": "jamin"
            }
        }
    },
    {
        "id": 11,
        "target": {
            "body": "This is the body",
            "title": "Browsing the APISSS",
            "user": {
                "first_name": "user",
                "last_name": "two"
            }
        }
    }
]

I tried getting this using the fetch api:

fromServer() {
    console.log('fromServer')
    var headers = new Headers();
    headers.append('Accept', 'application/json');
    let a = fetch('http://test.com/api/posts/', headers)
        .then(function(response) {
                if (response.status !== 200) {
                    console.log('There was a problem. Status Code: ' +  response.status);  
                    return;
                }

                response.json().then(function(data) {  
                    console.log(data);
                });  
            }  
        )  
        .catch(function(err) {  
            console.log('Fetch Error :-S', err);  
        });
}

But I am getting this error:

Unexpected token < in JSON at position 0

SyntaxError: Unexpected token < in JSON at position 0

How can I solve this problem? Could you please help me. Thank you.

chances are, you're receiving an HTML document - try `response.text()` instead of `response.json()` to see what you're actually receiving — Jaromanda X, Aug 08 '16 at 05:19
I think it should be like -> " .then(function(response) => { ... } ); " , you are missing " => ". Just a guess. — Rajesh, Aug 08 '16 at 06:42

score 2 · Answer 1 · answered Aug 08 '16 at 05:56

It is clear that you have some syntax error while parsing response into json object.

Remove all the comments from server json file if any.

If it is not: I believe the response body is not json.

You're receiving HTML (or XML) back from the server, but code is enable to parse as JSON. Check the "Network" tab in Chrome dev tools to see contents of the server's response.

Or debug using this code: (as "Jaromanda X" said)

.then(function(response) {
                console.log(response);
                console.log(response.status);
                console.log(response.json());
                console.log(response.text());
                })  
        .catch(function(err) {  
            console.log('Fetch Error :-S', err);  
        });

score 1 · Answer 2 · edited Aug 26 '21 at 20:57

Please check that your server is giving response in JSON format only. It should not be a string. For Associative data you should start your JSON object with { not [ .

So your data should be in below format:

{
  "data": [
    {
      "id": 7,
      "target": {
        "body": "This is the body",
        "title": "Airbnb raising a reported $850M at a $30B valuation",
        "user": {
          "first_name": "ben",
          "last_name": "jamin"
        }
      }
    },
    {
      "id": 11,
      "target": {
        "body": "This is the body",
        "title": "Browsing the APISSS",
        "user": {
          "first_name": "user",
          "last_name": "two"
        }
      }
    }
  ]
}

And you can get all data from response.data . For more detail follow this link .

score 1 · Answer 3 · answered Nov 14 '17 at 09:05

1

You can try adding the dataType property,just like dataType: 'html' or dataType: 'text'

answered Nov 14 '17 at 09:05

U2647

450
4
10

score 0 · Answer 4 · answered Aug 08 '16 at 06:31

The wording of the error message corresponds to what you get from Google Chrome when you run JSON.parse('<...'). I know you said the server is setting Content-Type:application/json, but I am led to believe the response body is actually HTML.

"SyntaxError: Unexpected token < in JSON at position 0"

with the line console.error(this.props.url, status, err.toString()) underlined. The err was actually thrown within jQuery, and passed to you as a variable err. The reason that line is underlined is simply because that is where you are logging it.

I would suggest that you add to your logging. Looking at the actual xhr (XMLHttpRequest) properties to learn more about the response. Try adding console.warn(xhr.responseText) and you will most likely see the HTML that is being received.

Please correct your code according to above explanation.

score 0 · Answer 5 · answered Aug 08 '16 at 12:44

so, you can use with start JSON array ;

{

"array": [

    {
        "id": 7,
        "target": {
            "body": "This is the body",
            "title": "Airbnb raising a reported $850M at a $30B valuation",
            "user": {
                "first_name": "ben",
                "last_name": "jamin"
            }
        }
    },
    {
        "id": 11,
        "target": {
            "body": "This is the body",
            "title": "Browsing the APISSS",
            "user": {
                "first_name": "user",
                "last_name": "two"
            }
        }
    }
]

}

score 0 · Accepted Answer · answered Aug 09 '16 at 11:23

So the problem was this: Since I was testing it from the vagrant machine in LAN and in my hosts file I added the ip of vagrant machine as the url (test.com), the device was not able to fetch to that url. After I changed the vagrant machine to port forward and gave the original IP address of the machine, I was able to fetch the json objects. Thank you all for your help.

score 0 · Answer 7 · edited Aug 23 '22 at 18:43

0

In my case, the port I was trying to use was already in use. I solved this issue by executing the follwing command in the command prompt in order to terminate the port.

taskkill /F /IM node.exe

edited Aug 23 '22 at 18:43

Maik Hasler

1,064
6
36

answered Aug 17 '22 at 07:38

shubham rawat

1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32504171) – Lajos Arpad Aug 23 '22 at 16:30

Unexpected token < in JSON at position 0

7 Answers7

Linked