In the following
const fetchData = async () => {
try {
const response = await fetch("faulty-endpoint");
const data = await response.text()
console.log('data', data)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
How do I turn the response.text() data back to json? I can't do
const data = await response.json()
Because then I console.log
nothing. I want it to be JSON
format so I can save it into a useState
array that I can map
across.
In the following
const fetchData = async () => {
try {
const response = await fetch("faulty-endpoint");
const data = await response.text()
console.log('data', data)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
How do I turn the response.text() data back to json? I can't do
const data = await response.json()
Because then I console.log
nothing. I want it to be JSON
format so I can save it into a useState
array that I can map
across.
-
1
"Because then I console.log nothing" <--- What do you mean by this? You can use
console.log
with arbitrary objects, so you can useawait response.json()
. – Dai Commented Feb 19, 2022 at 5:26 -
1
Why not use
response.json()
in the first place? And it sounds like you don't actually want JSON, you want an object, which you can get with from a json string via JSON.parse(). – ray Commented Feb 19, 2022 at 5:27 - @Dai if I console.log data after await response.json(), I don't console.log anything – dev_el Commented Feb 19, 2022 at 5:28
- @rayhatfield I would like an array of objects to map across, using response.json() does not allow me to see the data. It seems i can only use response.text() to read the data from the fetch url – dev_el Commented Feb 19, 2022 at 5:29
-
1
@dev_el Yes, it's possible. See youdateme's answer, or just do
const obj = JSON.parse(text.replace(/,$/, ''))
. – ray Commented Feb 19, 2022 at 6:46
5 Answers
Reset to default 4Because of that trailing ma, you can remove it first, then use JSON.parse
:
let text = await response.text();
// if trailing ma present, remove last character by slicing it off
// -1 in slice is the same as text.length - 1
if (text.endsWith(",")) text = text.slice(0, -1);
const data = JSON.parse(text);
This isn't the best or cleanest solution however; ideally the API should return valid JSON...
Here's a working proof-of-concept implementation of youdateme's answer.
I'm faking the request here to avoid CORS issues and such, but the response is copied from the endpoint in your question.
(Note: I had to re-escape the quotes around \"Hello World\"
in the last record in the exported template string.)
It does what youdateme suggested and it works.
const fetchData = async () => {
try {
const response = await fakeRequest();
const data = JSON.parse(response.replace(/,$/, ""));
setData(data);
} catch (error) {
console.error(error);
}
};
fetchData();
If this solves your problem you should accept youdateme's answer.
JSON and a JavaScript object look similar, but they're different. JSON is only a string that's formatted like a JavaScript object. See: Working with JSON - MDN
To map across, you need it to be a JavaScript object, not JSON.
Use JSON.parse(yourResponse)
to parse a JSON string into a JavaScript object (or array, etc.). See: JSON.parse from MDN
To convert a JavaScript object into a JSON string, you may use JSON.stringify(yourObject)
The problem seems to the formatting of the response returned by the api. The api returns a trailing ',' at the end of the array which makes it an invalid JSON object. remove that ',' from the response and
const data = await response.json()
should work.
Try this JSON.parse(responseData)
const fetchData = async () => {
try {
const response = await fetch("faulty-endpoint");
const data = await response.text()
console.log('data', JSON.parse(data));
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
Other solution:
fetch('targetedURL')
.then(response => response.json())
.then(data => console.log(data));