最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to convert response.text() to JSON with react - Stack Overflow

programmeradmin1浏览0评论

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.

Share Improve this question edited Feb 19, 2022 at 7:06 dev_el asked Feb 19, 2022 at 5:22 dev_eldev_el 2,9536 gold badges29 silver badges65 bronze badges 15
  • 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
 |  Show 10 more ments

5 Answers 5

Reset to default 4

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));
发布评论

评论列表(0)

  1. 暂无评论