Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

127
Views
Creating new array of object from api call in react js

I'm actually getting data from google calendar API for public holidays and I want to show them in the calendar. For that, I'm first getting the data from google API, and then I'm trying to create a new array of objects that will store the data that I needed from the google API calendar. The issue is I'm able to create a new array of objects but not able to add new objects for whole the data getting from the google calendar API. I try using loop but not work.

My code

let google;

useEffect(() => {
    axios.get('https://www.googleapis.com/calendar/v3/calendars/en.australian%23holiday%40group.v.calendar.google.com/events?key=personalkey')
        .then(res => {
            const data = res.data.items;
            console.log("Google api calendar data", data)

        for (let i = 0; i < data.length; i++) {

            data.map((item) => {
                google = {
                    "id": item.id,
                    "title": item.summary,
                    "location": "Australia",
                    "start": new Date(moment(item.start.date)),
                    "end": new Date(moment(item.end.date)),
                    "description": item.description,
                    "durationday": 'Fulllday',
                    "sameId": null

                }
            })
        }

        console.log("goggle making array of object inside promise", google)
    })
    .catch(err => { console.log('Google api calendar error', err) })

})

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Right now you are looping through the items twice. for loop and map both loop through the array. map is what you want and is used if want to modify an array but it requires that you return each object that you want to place in the new array. You should read about how to use map here array.prototype.map. So I think what you are trying to do is the following:

useEffect(() => {
  axios.get('https://www.googleapis.com/calendar/v3/calendars/en.australian%23holiday%40group.v.calendar.google.com/events?key=personalkey')
    .then(res => {
        const data = res.data.items.map((item) => {
          return {
            "id": item.id,
            "title": item.summary,
            "location": "Australia",
            "start": new Date(moment(item.start.date)),
            "end": new Date(moment(item.end.date)),
            "description": item.description,
            "durationday": 'Fulllday',
            "sameId": null
          }
      })
    console.log("Your new array of modified objects here", data)
  })
  .catch(err => { console.log('Google api calendar error', err) })
}, [])
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!