Styjun

Are there any sonatas with only two sections?

How about space ziplines

How to rename a files in a directory

How can we allow remote players to effectively interact with a physical tabletop battle-map?

Why are BJTs common in output stages of power amplifiers?

Biology of a Firestarter

Why does the headset man not get on the tractor?

Was this seat-belt sign activation standard procedure?

Tube from Heathrow to King's Cross

Were any of the books mentioned in this scene from the movie Hackers real?

The meaning of the Middle English word “king”

Developers demotivated due to working on same project for more than 2 years

Establishing isomorphisms between polynomial quotient rings

Why weren't the bells paid heed to in S8E5?

Wireless headphones interfere with Wi-Fi signal on laptop

the grammar about `adv adv` as 'too quickly'

Single word that parallels "Recent" when discussing the near future

What was the ring Varys took off?

Why doesn't Iron Man's action affect this person in Endgame?

Why did the metro bus stop at each railway crossing, despite no warning indicating a train was coming?

Is 12 minutes connection in Bristol Temple Meads long enough?

Will casting a card from the graveyard with Flashback add a quest counter on Pyromancer Ascension?

Adding labels and comments to a matrix

Why do the lights go out when someone enters the dining room on this ship?

React Js: Uncaught (in promise) SyntaxError: Unexpected token

componentDidMount() fetch for local dataFetch API calls fail after implementing catch-all express routing solution: Unexpected token < in JSON at position 0json Uncaught SyntaxError: Unexpected token :uncaught syntaxerror unexpected token U JSONJSONP returning “Uncaught SyntaxError: Unexpected token :”“SyntaxError: Unexpected token < in JSON at position 0”Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0Error: Uncaught (in promise): SyntaxError: Unexpected token < in JSONUncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parseError : SyntaxError: Unexpected token i in JSON at position 0 in React Native“Uncaught SyntaxError: Unexpected token :” JSONP responseReactJs and D3.js : Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at responseJson

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

17

2

I want to fetch my Json file in react js, for this I am using fetch. But it shows an error

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

What could be the error, i am getting no clue. I even validated my JSON.

handleGetJson()
 console.log("inside handleGetJson");
 fetch(`./fr.json`)
 .then((response) => response.json())
 .then((messages) => console.log("messages"););

My Json (fr.json)

 "greeting1": "(fr)choose an emoticon",
 "addPhoto1": "(fr)add photo",
 "close1": "(fr)close"

javascript json ajax reactjs

share|improve this question

asked May 17 '16 at 7:31

iamsakshamiamsaksham

1,06411533

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Maybe you get error page in response, look at network tab in developer tools what the response was.
  
  – jcubic
  May 17 '16 at 7:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah. I'm getting some garbage html in fr.json.
  
  – iamsaksham
  May 17 '16 at 7:36
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Okay, I solved the issue. Firstly the .json needs to be loaded via localhost. So I changed the fetch('http://localhost/img/fr.json'). Further I was running my app on localhost:8080, so a CORS issue occurred which was taken care by disabling it via a chrome plugin. Anyway thanks a lot @jcubic for giving a heads up, because sometimes it not any fault in the code.
  
  – iamsaksham
  May 17 '16 at 8:13
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  check if the data that you are loading is in JSON form (that "<" sign is telling that something, something is about XML)
  
  – Zack Zilic
  Feb 23 '18 at 13:45
  

  
  
  
  

add a comment | 

17

2

I want to fetch my Json file in react js, for this I am using fetch. But it shows an error

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

What could be the error, i am getting no clue. I even validated my JSON.

handleGetJson()
 console.log("inside handleGetJson");
 fetch(`./fr.json`)
 .then((response) => response.json())
 .then((messages) => console.log("messages"););

My Json (fr.json)

 "greeting1": "(fr)choose an emoticon",
 "addPhoto1": "(fr)add photo",
 "close1": "(fr)close"

javascript json ajax reactjs

share|improve this question

asked May 17 '16 at 7:31

iamsakshamiamsaksham

1,06411533

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Maybe you get error page in response, look at network tab in developer tools what the response was.
  
  – jcubic
  May 17 '16 at 7:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah. I'm getting some garbage html in fr.json.
  
  – iamsaksham
  May 17 '16 at 7:36
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Okay, I solved the issue. Firstly the .json needs to be loaded via localhost. So I changed the fetch('http://localhost/img/fr.json'). Further I was running my app on localhost:8080, so a CORS issue occurred which was taken care by disabling it via a chrome plugin. Anyway thanks a lot @jcubic for giving a heads up, because sometimes it not any fault in the code.
  
  – iamsaksham
  May 17 '16 at 8:13
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  check if the data that you are loading is in JSON form (that "<" sign is telling that something, something is about XML)
  
  – Zack Zilic
  Feb 23 '18 at 13:45
  

  
  
  
  

add a comment | 

I want to fetch my Json file in react js, for this I am using fetch. But it shows an error

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

What could be the error, i am getting no clue. I even validated my JSON.

handleGetJson()
 console.log("inside handleGetJson");
 fetch(`./fr.json`)
 .then((response) => response.json())
 .then((messages) => console.log("messages"););

My Json (fr.json)

 "greeting1": "(fr)choose an emoticon",
 "addPhoto1": "(fr)add photo",
 "close1": "(fr)close"

javascript json ajax reactjs

share|improve this question

asked May 17 '16 at 7:31

iamsakshamiamsaksham

1,06411533

handleGetJson()
 console.log("inside handleGetJson");
 fetch(`./fr.json`)
 .then((response) => response.json())
 .then((messages) => console.log("messages"););

 "greeting1": "(fr)choose an emoticon",
 "addPhoto1": "(fr)add photo",
 "close1": "(fr)close"

share|improve this question

asked May 17 '16 at 7:31

iamsakshamiamsaksham

1,06411533

share|improve this question

asked May 17 '16 at 7:31

iamsakshamiamsaksham

1,06411533

asked May 17 '16 at 7:31

iamsakshamiamsaksham

1,06411533

asked May 17 '16 at 7:31

iamsakshamiamsaksham

1,06411533

4 Answers
4

active

oldest

votes

28

Add two headers Content-Type and Accept to be equal to application/json.

handleGetJson()
 console.log("inside handleGetJson");
 fetch(`./fr.json`, 
 headers : 
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 

 )
 .then((response) => response.json())
 .then((messages) => console.log("messages"););

share|improve this answer

answered Feb 16 '17 at 20:20

Abdennour TOUMIAbdennour TOUMI

37.1k15148165

add a comment | 

3

The solution that worked for me is that:-
I moved my data.json file from src to public directory.
Then used fetch API to fetch the file.

fetch('./data.json').then(response => 
 console.log(response);
 return response.json();
 ).then(data => 
 // Work with JSON data here
 console.log(data);
 ).catch(err => 
 // Do something for an error here
 console.log("Error Reading data " + err);
 );

The problem was that after compiling react app the fetch request looks for the file at URL "http://localhost:3000/data.json" which is actually the public directory of my react app. But unfortunately while compiling react app data.json file is not moved from src to public directory. So we have to explicitly move data.json file from src to public directory.

share|improve this answer

answered Jan 7 at 17:18

Akash Kumar SethAkash Kumar Seth

1267

add a comment | 

0

It may come when the API(you are consuming) is not sending the corresponding JSON.
You may experience the response as 404 page or something like HTML/XML response.

share|improve this answer

answered Jan 19 at 16:38

Ashraf ZamanAshraf Zaman

12

add a comment | 

-2

Mostly this is caused with an issue in your React/Client app. Adding this line to your client package.json solves it

"proxy": "http://localhost:5000/"

Note: Replace 5000, with the port number where your server is running

Reference: How to get create-react-app to work with a Node.js back-end API

share|improve this answer

answered Jun 11 '18 at 1:35

JeanJean

214

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  This does not answer the question.
  
  – Jared Smith
  Jun 12 '18 at 14:18
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37269808%2freact-js-uncaught-in-promise-syntaxerror-unexpected-token-in-json-at-posit%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

28

Add two headers Content-Type and Accept to be equal to application/json.

handleGetJson()
 console.log("inside handleGetJson");
 fetch(`./fr.json`, 
 headers : 
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 

 )
 .then((response) => response.json())
 .then((messages) => console.log("messages"););

share|improve this answer

answered Feb 16 '17 at 20:20

Abdennour TOUMIAbdennour TOUMI

37.1k15148165

add a comment | 

28

Add two headers Content-Type and Accept to be equal to application/json.

handleGetJson()
 console.log("inside handleGetJson");
 fetch(`./fr.json`, 
 headers : 
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 

 )
 .then((response) => response.json())
 .then((messages) => console.log("messages"););

share|improve this answer

answered Feb 16 '17 at 20:20

Abdennour TOUMIAbdennour TOUMI

37.1k15148165

add a comment | 

Add two headers Content-Type and Accept to be equal to application/json.

handleGetJson()
 console.log("inside handleGetJson");
 fetch(`./fr.json`, 
 headers : 
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 

 )
 .then((response) => response.json())
 .then((messages) => console.log("messages"););

share|improve this answer

answered Feb 16 '17 at 20:20

Abdennour TOUMIAbdennour TOUMI

37.1k15148165

handleGetJson()
 console.log("inside handleGetJson");
 fetch(`./fr.json`, 
 headers : 
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 

 )
 .then((response) => response.json())
 .then((messages) => console.log("messages"););

share|improve this answer

answered Feb 16 '17 at 20:20

Abdennour TOUMIAbdennour TOUMI

37.1k15148165

answered Feb 16 '17 at 20:20

Abdennour TOUMIAbdennour TOUMI

37.1k15148165

answered Feb 16 '17 at 20:20

Abdennour TOUMIAbdennour TOUMI

37.1k15148165

3

The solution that worked for me is that:-
I moved my data.json file from src to public directory.
Then used fetch API to fetch the file.

fetch('./data.json').then(response => 
 console.log(response);
 return response.json();
 ).then(data => 
 // Work with JSON data here
 console.log(data);
 ).catch(err => 
 // Do something for an error here
 console.log("Error Reading data " + err);
 );

The problem was that after compiling react app the fetch request looks for the file at URL "http://localhost:3000/data.json" which is actually the public directory of my react app. But unfortunately while compiling react app data.json file is not moved from src to public directory. So we have to explicitly move data.json file from src to public directory.

share|improve this answer

answered Jan 7 at 17:18

Akash Kumar SethAkash Kumar Seth

1267

add a comment | 

3

The solution that worked for me is that:-
I moved my data.json file from src to public directory.
Then used fetch API to fetch the file.

fetch('./data.json').then(response => 
 console.log(response);
 return response.json();
 ).then(data => 
 // Work with JSON data here
 console.log(data);
 ).catch(err => 
 // Do something for an error here
 console.log("Error Reading data " + err);
 );

The problem was that after compiling react app the fetch request looks for the file at URL "http://localhost:3000/data.json" which is actually the public directory of my react app. But unfortunately while compiling react app data.json file is not moved from src to public directory. So we have to explicitly move data.json file from src to public directory.

share|improve this answer

answered Jan 7 at 17:18

Akash Kumar SethAkash Kumar Seth

1267

add a comment | 

The solution that worked for me is that:-
I moved my data.json file from src to public directory.
Then used fetch API to fetch the file.

fetch('./data.json').then(response => 
 console.log(response);
 return response.json();
 ).then(data => 
 // Work with JSON data here
 console.log(data);
 ).catch(err => 
 // Do something for an error here
 console.log("Error Reading data " + err);
 );

The problem was that after compiling react app the fetch request looks for the file at URL "http://localhost:3000/data.json" which is actually the public directory of my react app. But unfortunately while compiling react app data.json file is not moved from src to public directory. So we have to explicitly move data.json file from src to public directory.

share|improve this answer

answered Jan 7 at 17:18

Akash Kumar SethAkash Kumar Seth

1267

fetch('./data.json').then(response => 
 console.log(response);
 return response.json();
 ).then(data => 
 // Work with JSON data here
 console.log(data);
 ).catch(err => 
 // Do something for an error here
 console.log("Error Reading data " + err);
 );

share|improve this answer

answered Jan 7 at 17:18

Akash Kumar SethAkash Kumar Seth

1267

answered Jan 7 at 17:18

Akash Kumar SethAkash Kumar Seth

1267

answered Jan 7 at 17:18

Akash Kumar SethAkash Kumar Seth

1267

0

It may come when the API(you are consuming) is not sending the corresponding JSON.
You may experience the response as 404 page or something like HTML/XML response.

share|improve this answer

answered Jan 19 at 16:38

Ashraf ZamanAshraf Zaman

12

add a comment | 

0

It may come when the API(you are consuming) is not sending the corresponding JSON.
You may experience the response as 404 page or something like HTML/XML response.

share|improve this answer

answered Jan 19 at 16:38

Ashraf ZamanAshraf Zaman

12

add a comment | 

It may come when the API(you are consuming) is not sending the corresponding JSON.
You may experience the response as 404 page or something like HTML/XML response.

share|improve this answer

answered Jan 19 at 16:38

Ashraf ZamanAshraf Zaman

12

share|improve this answer

answered Jan 19 at 16:38

Ashraf ZamanAshraf Zaman

12

answered Jan 19 at 16:38

Ashraf ZamanAshraf Zaman

12

answered Jan 19 at 16:38

Ashraf ZamanAshraf Zaman

12

-2

Mostly this is caused with an issue in your React/Client app. Adding this line to your client package.json solves it

"proxy": "http://localhost:5000/"

Note: Replace 5000, with the port number where your server is running

Reference: How to get create-react-app to work with a Node.js back-end API

share|improve this answer

answered Jun 11 '18 at 1:35

JeanJean

214

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  This does not answer the question.
  
  – Jared Smith
  Jun 12 '18 at 14:18
  

  
  
  
  

add a comment | 

-2

Mostly this is caused with an issue in your React/Client app. Adding this line to your client package.json solves it

"proxy": "http://localhost:5000/"

Note: Replace 5000, with the port number where your server is running

Reference: How to get create-react-app to work with a Node.js back-end API

share|improve this answer

answered Jun 11 '18 at 1:35

JeanJean

214

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  This does not answer the question.
  
  – Jared Smith
  Jun 12 '18 at 14:18
  

  
  
  
  

add a comment | 

Mostly this is caused with an issue in your React/Client app. Adding this line to your client package.json solves it

"proxy": "http://localhost:5000/"

Note: Replace 5000, with the port number where your server is running

Reference: How to get create-react-app to work with a Node.js back-end API

share|improve this answer

answered Jun 11 '18 at 1:35

JeanJean

214

share|improve this answer

answered Jun 11 '18 at 1:35

JeanJean

214

answered Jun 11 '18 at 1:35

JeanJean

214

answered Jun 11 '18 at 1:35

JeanJean

214