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.

• javascript
• reactjs
• async-await

• 1 "Because then I console.log nothing" <--- What do you mean by this? You can use console.log with arbitrary objects, so you can use await 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 5

Because 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));