CODEWITHSUNDEEP
javascriptjsonreact-native
Benjamin Smith Max
Benjamin Smith Max

Reputation: 2748

Unexpected token < in JSON at position 0

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.

Upvotes: 3

Views: 21870

Answers (7)

shubham rawat
shubham rawat

Reputation: 1

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

Upvotes: 0

Himanshu Dash
Himanshu Dash

Reputation: 21

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 .

Upvotes: 1

U2647
U2647

Reputation: 510

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

Upvotes: 1

Benjamin Smith Max
Benjamin Smith Max

Reputation: 2748

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.

Upvotes: 0

Sinan
Sinan

Reputation: 21

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"
            }
        }
    }
]

}

Upvotes: 0

Vijay Barnwal
Vijay Barnwal

Reputation: 154

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.

Upvotes: 0

Arun Kumar
Arun Kumar

Reputation: 333

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);  
        });

Upvotes: 2

Related Questions