0

I am doing a fetch in React Native and am very new to React Native, by the way.

const apiUrl = 'http://hermes.hstn.me/api/';
const response = await fetch(apiUrl, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
  }
});

if(!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}

const responseData = await response.json();
console.log('responseData: ', responseData);

You can visit the apiURL in the above code block and see the returned JSON content if you wish, but here it is:

{"status":"success","message":"data retrieved successfully","items":[{"id":1,"name":"a"},{"id":2,"name":"b"}]}

And here is the PHP code generating that JSON response:

<?php
$data = [
    'status' => 'success',
    'message' => 'data retrieved successfully',
    'items' => [
        ['id' => 1, 'name' => 'a'],
        ['id' => 2, 'name' => 'b']
    ]
];
$jsonOutput = json_encode($data);

header('Content-Type: application/json');
echo $jsonOutput;

exit();
?>

And here is the error coming back in the ReactNative debug console:

Error: Uncaught (in promise, id: 0): "SyntaxError: JSON Parse error: Unexpected character: <"
    at onUnhandled (promiseRejectionTrackingOptions.js:40:16)
    at onUnhandled (address at InternalBytecode.js:1:3386)
Caused by: SyntaxError: JSON Parse error: Unexpected character: <
    at parse (native)
    at tryCallOne (address at InternalBytecode.js:1:1180)
    at anonymous (address at InternalBytecode.js:1:1874)

I can not figure out where the unexpected character, <, is coming from in the error.

This is the first time I've worked in React Native. Have plenty of experience with Angular and never ran into this. So I'm guessing it's some quirk of what php is returning (headers somewhere maybe?) and React Native being extra strict?

4
  • 5
    Look at the response in the browser's Developer Tools -> Network tab, and see what the response is that you're getting. Usually < means you're getting an HTML response. It looks like there's some sort of redirect going on. When I use curl with a browser's user agent, I'm getting HTML. When I use curl with no user agent, or a fake one, I'm getting an empty response from the server. Commented Oct 15 at 18:41
  • 1
    The URL you're using returns HTML that contains JavaScript to set a cookie and then redirect to another URL. When the cookie is set properly, that URL returns the JSON. Commented Oct 15 at 21:22
  • 1
    Since the cookie isn't set when you do the fetch, and fetch doesn't execute JavaScript, none of this works for you. Commented Oct 15 at 21:24
  • 1
    check your endpoint again, I saw http://hermes.hstn.me/api/ has header content-type: text/html; charset=UTF-8 not as application/json in your PHP code. I guess React Native client API try to reconstruct response body follow content-type header . Commented Oct 16 at 6:41

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.