javascript - 合并来自不同查询的数据，不重复

Question

我通过 Api 从三个不同的查询中获取数据。我希望合并数据而没有重复的数据。

This is my function where i am merging the data:

getStaffCount(data) {
    if (data == null || data.results === null )
        return [];
    else
        return data.results.StaffCount.map(m => ({ Name: m.Name, Accounts: m.Accounts  })).
                    concat(data.results.RepProviderAccount.map(m => ({ Name: m.Name, Accnt: m.Accnt  }))).
                    concat( data.results.ProviderAccount.map(m => ({ Name: m.Name, Account: m.Account })));
}

这是我的 table :

<PowerTable Data={{ rows: this.getStaffCount(this.props.GridData) }}  rowsPerPage={5} orderBy="Name" order="asc" >
                        <PowerColumn id='Name' columnName='Name' numeric={false} disablePadding={false} label='Profile Name' width={100}>
                        </PowerColumn>
                        <PowerColumn id='Accounts' columnName='Accounts' numeric={false} disablePadding={false} label='Staff Accounts' width={100}>
                        </PowerColumn>
                        <PowerColumn id='Account' columnName='Account' numeric={false} disablePadding={false} label='Provider Account' width={100} >
                        </PowerColumn>
                        <PowerColumn id='Accnt' columnName='Accnt' numeric={false} disablePadding={false} label='Rep Provider Account' width={100} >
                        </PowerColumn>
                    </PowerTable>

So in the above image same Profile Name(CNX MSL Platform) is coming twice. So is there any way i can merged those rows?

I want the Output in this way:
 Profile Name                     Staff      Provider      Rep Provider
 Cnx MSl Platform                   2                           1            
 Cnx Specilaity sales Platform      7                           22

数据:

Answer 1

作为对象

如果数据是一个对象，最简单的方法就是扩展运算符

const combinedData = {
  ...dataSrc1,
  ...dataSrc2,
  ...dataSrc3,
}

所有匹配的键都会被之前的覆盖

作为数组

这有点复杂。假设您的对象具有唯一的 id(或将 2 标识为同一项目的任何值)，您可以使用 Set，因为它们只能具有唯一的值。

const array = [
  ...dataSrc1,
  ...dataSrc2,
  ...dataSrc3,
]
const unique = [...new Set(array.map(item => item.id))];