How to read data from URL using JavaScript?

Question

I want to read data from URL using JavaScript.

below is my code,

function Parent() {
  const [data, setData] = React.useState(null);
  const url = 'someurl';
  React.useEffect(() => {
      fetch(url)
        .then(res => JSON.stringify(res))
        .then(data => setData(data);
        });
    if (data) {
      console.log('data', data);
    }

  }

logging the data state would give the result like below,

{
  "count": 2,
  "results": [{
      "title": "title1",
      "characters": [
        "character1",
      ],

    },
    {
      "title": "title2",
      "characters": [
        "character3",
      ],

    },
  ]
}

How can I read results object from URL?

Are we to assume that you're not getting data like that by reading data from state? If so, you have to remember that fetch is asynchronous, as is setData. You have to wait until both processes complete before you can read the data. — Heretic Monkey
– Heretic Monkey, Commented Sep 28, 2020 at 13:17
Does this answer your question? Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference — Heretic Monkey
– Heretic Monkey, Commented Sep 28, 2020 at 13:17

Christian · Accepted Answer · 2020-09-28 13:16:59Z

1

You don't do


fetch(url)
   .then(res => JSON.stringify(res))
   //...

Instead you do


fetch(url)
   .then(res => res.json())
   //...

Reason being that res is a Response see MDN which contains more than just the data you're interested in (the response body).

answered Sep 28, 2020 at 13:16

Christian

1,2589 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

stackoverflow_user Over a year ago

using this for some reason gives me [object object]

Christian Over a year ago

What do you mean by "gives me"? Is this the output of console.log()?

Christian Over a year ago

That's maybe fine depending on how smart your browser is. You can do console.log('data', JSON.stringify(data)) in case your browser isn't very smart.

bensiu · Accepted Answer · 2020-09-28 15:34:28Z

0

simply

fetch(url)
  .then(res => res.json())
  .then(data => setData(data))

edited Sep 28, 2020 at 15:34

bensiu

25.7k56 gold badges81 silver badges117 bronze badges

answered Sep 28, 2020 at 13:18

Ibrahim shamma

4185 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to read data from URL using JavaScript?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related