Jquery Merge Two different array-CodePudding

There are two array's response as follow:

Array1 = [{...},{...},{...} ...]; // array2 has exact same records as in array1
Array2 = [{BookingId: 1, Duration: 30, BookingDate: 12/09/2021 12:10},{BookingId: 2, Duration: 45, BookingDate: 12/09/2021 13:45}, ...];

now apply jquery merge on these arrays like:

var result = $.merge(Array1, Array2);

as a result both array have same data but showing duplicate results in a output.

CodePudding user response：

If you need to dedupe based on BookingId property, you may leverage Map:

const arr1 = [{BookingId: 1, Duration: 30, BookingDate: '12/09/2021 12:10'},{BookingId: 2, Duration: 45, BookingDate: '12/09/2021 13:45'}],
      arr2 = [{BookingId: 2, Duration: 45, BookingDate: '12/09/2021 13:45'}],
      
      
      merged = [
        ...[...arr1, ...arr2]
          .reduce((acc, record) => 
            (acc.set(record.BookingId, record), acc), new Map)
          .values()
      ]
      
console.log(merged)

.as-console-wrapper{min-height:100%}

CodePudding user response：

I appreciated you all for your efforts.

var oldIds = new Set(this.bookings.map(b => b.BookingId));
            var merged = [...response.filter(b => !oldIds.has(b.BookingId)), ...this.bookings];
            this.bookings = merged;

Its resolved!