How to get API data using fetch in NodeJS

Question

I have this api which is returning arrays of values:

app.get("/events", (req, res) => {
  let response = null;
  let authObj = auth.authorize();

  setTimeout(() => {
    let result = controller.listEvents(authObj);

    result.then((data) => {
      response = data;
      console.log(data)
      res.json(response); // is this way of passing this data object to front-end right ???
    });
  }, 2000);
});

the result of console.log(data) above looks like below:

[
  {
    kind: 'calendar#event',
    etag: '"3203302285276000"',
    id: '69jte9qmoij84irjf2ktlqlqcd',
    status: 'confirmed',
    htmlLink: 'https://www.google.com/calendar/event?eid=NjlqdGU5cW1vaWo4NGlyamYya3RscWxxY2QgYmFudWthamFuYW5hdGhqYXlhcmF0aG5hQG0',
    created: '2020-10-02T15:05:42.000Z',
    updated: '2020-10-02T15:05:42.638Z',
    summary: 'What’s New in Lens 3.6.0',
  },
  {
    kind: 'calendar#event',
    etag: '"3200206562152000"',
    id: '_6l6jehjbbtol8him9194uqr88907cjaoct3japrle5a3ii9o6ds62t3kcln68pb5',
    status: 'confirmed',
    htmlLink: 'https://www.google.com/calendar/event?eid=XzZsNmplaGpiYnRvbDhoaW05MTk0dXFyODg5MDdjamFvY3QzamFwcmxlNWEzaWk5bzZkczYydDNrY2xuNjhwYjUgYmFudWthamFuYW5hdGhqYXlhcmF0aG5hQG0',
    created: '2020-09-14T17:07:55.000Z',
    updated: '2020-09-14T17:08:01.076Z',
    summary: 'Ansible Contributor Summit - New Contributor Workshops',
   
  }
]

And I want to pass this data to my front-end and iterate over it to display the summary, status.

Here's how I get this value to my front-end:

 const [data, setData] = useState([]);
 useEffect(() => {
    fetch("/events").then((res) => {
      console.log(res);
      setData(res.data);
    });
  });

But when I try to print data it gives undefined

Can someone please help me?

Thanks!

Snow · Accepted Answer · 2020-10-04 23:18:09Z

3

The parameter is a Response. It is not the result of the request, it only contains the headers. You need

 const [data, setData] = useState([]);
 useEffect(() => {
    fetch("/events").then(res => res.json()).then((res) => {
      console.log(res);
      setData(res);
    });
  }, []);

Remember the empty dependency array. You don't want to fetch every time the component renders, only once.

The result doesn't have a data property, it's just an array. So use setData(res);, not setData(res.data);

answered Oct 4, 2020 at 23:18

Snow

4,1463 gold badges16 silver badges43 bronze badges

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

Comments

PurpSchurp · Accepted Answer · 2020-10-04 23:18:28Z

1

Give this a shot, because you are expecting json

const [data, setData] = useState([]);
 useEffect(() => {
    fetch("/events").then((res) => {  
    return res.json()
    }).then((responseJson) => {
       console.log(responseJson);
    });
  
  });

answered Oct 4, 2020 at 23:18

PurpSchurp

6256 silver badges14 bronze badges

3 Comments

Jananath Banuka Over a year ago

Thank you, but where should I set the setData ?

PurpSchurp Over a year ago

You could set the data where i console logged responseJson, check out that object and set the data there

Jananath Banuka Over a year ago

Okay, and how can I access the summary and status from that jason object? {data.map(function (item, i) { return <li key={i}>{item.summary}</li>; })} like this?

Collectives™ on Stack Overflow

How to get API data using fetch in NodeJS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related