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:
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:
Suggest me any alternative way to do my require task thank you…
- The code you are showing is different.
- You didn’t do what I asked.
- 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.parseis to get specific attribute from theres.databut 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:
- 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 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.