Having problem in parsing the JSON data using react.js

json
My data is displaying in this form but I want to parse the data … I’ve tried using Json.parse but its giving this error:
SyntaxError: Unexpected token u in JSON at position 0

How can I parse the data??

What is the typeof the data. It’s hard to tell if what you are showing is a JS array or a JS array encoded as a JSON string. Do you have a link to your code?

Posting Data:

const submitRecord = () => {

    const CustomerData = {
    temparr: JSON.stringify([...arr]),
     
    };
    axios.post("http://localhost:9000/khan-burger/recordTest.php", CustomerData)
    .then((res) => console.log(res.data))
      .catch((error) => console.log(error));

  };

“This line converting the whole array into JSON string”
temparr: JSON.stringify([…arr]),

Fetching data:

const [showRecord, setRecord] = useState([]);
  const fetchOrder = () => {
    axios.get("http://localhost:9000/khan-burger/recordTestList.php").then((res) => {
        setRecord(res.data);
    console.log(res.data)  
      })
      .catch((error) => {
        console.log(error);
      });
  };

Fetched Data output:
json

That doesn’t look like a console output. And I don’t see where you are trying to stringify. And which one are you asking about, the POST or the GET?

And can you do:

console.log('res.data', res.data)
console.log('typeof res.data', typeof res.data) 

Lets start it from beginning for better understanding.

i am making a Point of sale.
this is my ordered data which is getting stored in array format like this
arr :
[{“itemName”:“pizza”,“itemID”:“2”,“itemPrice”:“350”},{“itemName”:“Zinger burger”,“itemID”:“1”,“itemPrice”:“220”},{“itemName”:“Coke(Regular)”,“itemID”:“3”,“itemPrice”:“30”}]

Step 2 :

const submitRecord = () => {

    const CustomerData = {
    temparr: JSON.stringify([...arr]),
     
    };
    axios.post("http://localhost:9000/khan-burger/recordTest.php", CustomerData)
    .then((res) => console.log(res.data))
      .catch((error) => console.log(error));

  };

now i am posting my whole " arr " json formated data to DB .
in post method i am converting it to JSON.Stringify while posting
.
Step 3 :

const [showRecord, setRecord] = useState([]);
  const fetchOrder = () => {
    axios.get("http://localhost:9000/khan-burger/recordTestList.php").then((res) => {
        setRecord(res.data);
    console.log(res.data)  
      })
      .catch((error) => {
        console.log(error);
      });
  };

I am fetching it in my " Record Screen " but its getting fetched like Text String not in json format , that’s why I am not able to fetch single field from it and getting that weird kind of output .

Output:
json

Suggest me any alternative way to do my require task thank you…

  1. The code you are showing is different.
  2. You didn’t do what I asked.
  3. Please stop posting your “Data Table with default features” image - it is not helpful and we were able to understand it the other times you showed it.

You said:

I’ve tried using Json.parse but its giving this error:
SyntaxError: Unexpected token u in JSON at position 0

On what exact line? And on the previous line, log out the data and the type.

During fetching the data:

const fetchOrder = () => {
    axios.get("http://localhost:9000/khan-burger/recordTestList.php").then((res) => {
    setRecord(res.data);
    let data = JSON.parse(res.data); //on that exact line
    console.log(data);  
    // console.log(typeof res.data);  
  })

and I console.log('typeof res.data', typeof res.data)
output: object

Once again, the code you posted does not match what you are saying. You have:

// console.log(typeof res.data);

which is commented out, but you also say:

I console.log('typeof res.data', typeof res.data)
output: object

In any case, if it is an object, JSON.parse won’t work - it only works on json encoded strings. Is it already an object/array? I’ll ask you to do what I asked in the beginning and have been avoiding:

And can you do:

console.log('res.data', res.data)
console.log('typeof res.data', typeof res.data) 
1 Like

What I know is axios parses the returned JSON out of the box. Why invoke JSON.parse on a JS object? When you do console.log(res.data) are you getting what you expect from the backend?

1 Like

The reason of using JSON.parse is to get specific attribute from the res.data but can’t getting what I want …
Yes I’m getting the expected data from backend:
shows in the console like that:
(3) [{…}, {…}, {…}]

 {id: '4', array: '[{"itemName":"pizza","itemID":"2","itemPrice":"350…:"Zinger burger","itemID":"1","itemPrice":"220"}]'}
 {id: '5', array: '[{"itemName":"Zinger burger","itemID":"1","itemPri…Name":"shawarma","itemID":"4","itemPrice":"130"}]'}
 {id: '6', array: '[{"itemName":"pizza","itemID":"2","itemPrice":"350…":"Coke(Regular)","itemID":"3","itemPrice":"30"}]'}

But unable to fetch a specific attribute like:
itemName … itemID … itemPrice

OK, finally, that is useful information.

The reason of using JSON.parse is to get specific attribute from the res.data but can’t getting what I want …

That is not what it is for. It is for converting JSON encoded strings to JS data types.

But unable to fetch a specific attribute like:

That is because those look like JSON encoded strings. I would expect something like:

JSON.parse(res.data[0].array)

to work.

You might also try to map over that data to make it easier to work with:

const newData = res.data.map(({ array, ...rest }) => ({ ...rest, ...JSON.parse(array) })

or something like that.

Sir I tried to map over the res.data but it displays in the string form
e.g.
show you the out in the earlier when you said:

  1. Please stop posting your “Data Table with default features” image - it is not helpful and we were able to understand it the other times you showed it.

Didn’t you write the backend? Are you not the one in control of what is being sent? Why is the array a string?

1 Like

I suspect the issue is with how you are saving the data to the DB or querying the DB on the server-side.

In any case, based on the data that you’ve given, here is a working example:

const res = {
  data: [
    {id: '4', array: '[{"itemName":"pizza","itemPrice":"220"}]'},
    {id: '5', array: '[{"itemName":"Zinger burger","itemPrice":"130"}]'},
    {id: '6', array: '[{"itemName":"pizza","itemPrice":"30"}]'},
  ]
}

console.clear()

console.log('original data', res)

const newData = res.data.map(({ array, ...rest }) => ({ ...rest, ...JSON.parse(array)[0] }))
                             
console.log('new data', newData)

Here is a working pen.

It may need to be changed depending on the shape of the data that you want and whether or not array could ever have more than one element.

Thank you so much to everyone for help :two_hearts: :two_hearts: