如何连接两个对象数组？

Question

I am working with a React native project and I want to concatenate two arrays (having the same form). First I am working with a section list and Redux; then I fetch data from a server 10 items by 10. So for example, my first array must be like this:

data = [
{title: '01/02/2020', data:[{id: 1,location: 'paris', city: 'paris'},{id: 2, location: 'london', city: 'london'},{id: 3,location: 'atalanta', city: 'atalanta'}]},
{title: '02/02/2020', data: [{id: 4,location: 'madrid', city: 'madrid'},{id: 5,location: 'miami', city: 'miami'}]}
]

At the second fetch, I have the problem of concatenation between the old and the new array. I want to merge those that have the same title grouped in one title, and all of the data inside one array. For example, this is the second result from the second fetch:

data2 = [
{title: '02/02/2020', data:[{id: 6,location: 'lesboa', city: 'lesboa'},{id: 7,location: 'amestrdam', city: 'amestrdam'},{id:8,location: 'roma', city: 'roma'}]},
{title: '03/02/2020', data: [{id: 9,location: 'milano', city: 'milano'},{id:10,location: 'tokyo', city: 'tokyo'}]}
]

I expect the result to be like this:

data3 = [
{title: '01/02/2020', data:[{id: 1,location: 'paris', city: 'paris'},{id: 2, location: 'london', city: 'london'},{id: 3,location: 'atalanta', city: 'atalanta'}]},
{title: '02/02/2020', data:[{id: 4,location: 'madrid', city: 'madrid'},{id: 5,location: 'miami', city: 'miami'},{id: 6,location: 'lesboa', city: 'lesboa'},{id: 7,location: 'amesterdam', city: 'amesterdam'},{id:8,location: 'roma', city: 'roma'}]},
{title: '03/02/2020', data: [{id: 9,location: 'milano', city: 'milano'},{id:10,location: 'tokyo', city: 'tokyo'}]}

I found code like this (below), but the problem is that it duplicates the object inside my data array every time, and sometimes it duplicates it to 54 times

case HISTORIQUE_SUCCESS:
      const {count, skip, groupedvalue} = action.payload;

      const data1 = [...state.data];

      let data = Object.values(
        [...data1, ...groupedvalue].reduce(
          (acc, curr) => ({
            ...acc,
            [curr.title]:
              curr.title in acc
                ? {...curr, data: [...acc[curr.title].data, ...curr.data]}
                : {...curr},
          }),
          {},
        ),
      );

      return {
        ...state,
        data: skip === 0 ? groupedvalue : data,
        count,
        loader: false,
      };

Answer 1

The script you have will take care of grouping by title , but not for keeping the objects unique by id .

I tend to use Map for this purpose. This function will return a merged data array, given two input arrays. To demonstrate it, I have added the location with id 4 a in data2 also, for the same date as in data :

 function merged(data, data2) { let arr = data.concat(data2); let titles = new Map(arr.map(({title}) => [title, new Map])); arr.forEach(({title, data}) => { let map = titles.get(title); data.forEach(o => map.set(o.id, o)); }); return Array.from(titles.entries(), ([title, map]) => ({ title, data: [...map.values()] }) ); } let data = [{title: '01/02/2020',data:[{id: 1,location: 'paris', city: 'paris'},{id: 2, location: 'london', city: 'london'},{id: 3,location: 'atalanta', city: 'atalanta'}]},{title: '02/02/2020',data: [{id: 4,location: 'madrid', city: 'madrid'},{id: 5,location: 'miami', city: 'miami'}]}]; let data2 = [{title: '02/02/2020',data:[{id: 6,location: 'lesboa', city: 'lesboa'},{id: 4,location: 'madrid', city: 'madrid'},{id: 7,location: 'amestrdam', city: 'amestrdam'},{id:8,location: 'roma', city: 'roma'}]},{title: '03/02/2020',data: [{id: 9,location: 'milano', city: 'milano'},{id:10,location: 'tokyo', city: 'tokyo'}]}]; console.log(merged(data, data2));