How to merge two array of objects with reactjs?

Question

I have a react-big-calendar, I want to fetch the events of this week from the backend and the other weeks from the local storage.

My code is :

componentDidMount() {
    fetch("url")
    .then(Response => Response.json())
      .then(data => {
        let evts = data;
        for (let i = 0; i < evts.length; i++) {
          evts[i].start = moment(evts[i].start).toDate();
          evts[i].end = moment(evts[i].end).toDate();
          this.state.evt1.push(evts[i])
        }                   
        this.setState({
          evt1: evts,
          prevEvents : evts
        })
      }) 
      console.log(this.state.evt1)
      const cachedHits = JSON.parse(localStorage.getItem('Evènements')) 
      console.log(cachedHits)
      for (let j = 0; j <cachedHits.length; j++) {
        cachedHits[j].start = moment(cachedHits[j].start).toDate();
        cachedHits[j].end = moment(cachedHits[j].end).toDate();
        this.state.evt2.push(cachedHits[j])
      }
    this.setState( {
      evt2: this.state.evt2
  })
    this.setState({
      events: [...this.state.evt1, ...this.state.evt2]
    })
  console.log(this.state.events)
  }

the events is the merged array of evt1 (events from the backend) and evt2 (events from the localstorage), when I run it, I get on my console :

The evt1 are :

The evt2 are :

But, on my calendar, just the evt2 are displayed and not all the events (evt1 and evt2).

How can display all the events on my calendar ?

Vikas Singh · Answer 1 · 2022-11-21T06:39:15.407

28

You can use spread operator to merge two array.

var a = [{fname : 'foo'}]
var b = [{lname : 'bar'}]
var c = [...a, ...b] // output [{fname : 'foo'},{lname : 'bar'}]

edited Nov 21 '22 at 06:39

answered Apr 10 '19 at 08:05

Vikas Singh

1,791
1
14
26

frustrated for while, your answer made me happy!! still confused about the best practice of setting a state, array of objects or object of object :( – Vrangle May 18 '20 at 00:28
1

On `var b` if I just add this `var b = [{fname : 'other'}]`, note I've used the same key. Now, it's just merging with the same key again. So, the output is just like: `// [{fname : 'foo'},{fname : 'other'}]`. Not sure how to update the value only. – Niamul Nov 07 '20 at 18:47

score 6 · Accepted Answer · answered Apr 10 '19 at 08:01

Because you are making an HTTP call to your server, it takes some time to fetch the data. Instead of setting events state directly, you should wait for the response of your HTTP call. Your code should be like this:

componentDidMount() {
    fetch("url")
        .then(Response => Response.json())
        .then(data => {
            let evts = data;
            for (let i = 0; i < evts.length; i++) {
                evts[i].start = moment(evts[i].start).toDate();
                evts[i].end = moment(evts[i].end).toDate();
                this.state.evt1.push(evts[i])
            }
            this.setState({
                evt1: evts,
                prevEvents: evts
            })
        })
        .then(() => {

            console.log(this.state.evt1)
            const cachedHits = JSON.parse(localStorage.getItem('Evènements'))
            console.log(cachedHits)
            for (let j = 0; j < cachedHits.length; j++) {
                cachedHits[j].start = moment(cachedHits[j].start).toDate();
                cachedHits[j].end = moment(cachedHits[j].end).toDate();
                this.state.evt2.push(cachedHits[j])
            }
            this.setState({
                evt2: this.state.evt2
            })
            this.setState({
                events: [...this.state.evt1, ...this.state.evt2]
            })
            console.log(this.state.events)

        });
}

I also recommend you to have a catch block in your promise chain to handle errors.

score 1 · Answer 3 · answered Apr 10 '19 at 08:05

Add state.evt1 on evts, then iterate through data that you get from fetch, make changes to current element inside for loop, push element to evts and then add that evts to state

        let evts = this.state.evt1;
        for (let i = 0; i < data.length; i++) {
          data[i].start = moment(data[i].start).toDate();
          data[i].end = moment(data[i].end).toDate();
          evts.push(data[i])
        }                   
        this.setState({
          evt1: evts
        })

How to merge two array of objects with reactjs?

3 Answers3

Linked

Related