1

I am receiving data from my Express, Node.js backend api but when I use res.json() in React to retrieve the data I get an error. From what I observed in the res.text() response, I have the correct data I need, however it is causing an error when I use res.json();

I am looking for a way to either parse the data to allow for res.json() to work properly in react or a way to receive an array of data into react that would not cause the syntax error.

The error as it appears in the browser

p][1]

The res.text() 200 response

enter image description here

WilliamMabotjaCS227
  • 97
  • 12
  • Can you show us what you get from `res.text()`? Also what is the first character code (`text.getCharCodeAt(0)`)? Maybe there is a BOM (byte order mark) in front of the JSON data. – CherryDT Jul 01 '20 at 08:41
  • 1
    Ok thx for the second screenshot, I get the feeling even more that a BOM is the issue, can you try if this works please: `res.text().then(text => JSON.parse(text.trim()))` - the trim should remove the BOM. – CherryDT Jul 01 '20 at 08:44
  • Are you serving the CSV from a file? If so, open up that CSV file with Notepad++ which you seem to be using and look at the bottom right - does it say UTF-8 BOM instead of UTF-8? If so, go to Encoding -> Convert to UTF-8 (not UTF-8-BOM) and save it - this will remove the [byte order mark](https://stackoverflow.com/questions/2223882/whats-the-difference-between-utf-8-and-utf-8-without-bom) from the file. – cbr Jul 01 '20 at 08:51
  • Thank you CherryDT, the data was received successfully. Also thank you cbr for your reply, but the Source has to keep the same format. Thank you guys, you can post the answert. .then(text => JSON.parse(text.trim())) – WilliamMabotjaCS227 Jul 01 '20 at 09:48

0 Answers0