从api调用的json对象中删除重复值

时间:2019-03-13 10:00:19

标签: javascript reactjs

我调用一个API,该API保留数据中的重复值

async fetch() {
    const { user } = this.props;
    try {
        const res = await Data(user.token);
        this.setState({ data: res });
    } catch(error) {
        console.log('Error: cant retrieve ata', error);
    }
}

然后我对此数据设置一个过滤器

setFilteredContracts() {
    const { contracts, firstFilter, secondFilter, searchBar } = this.state;
    if (contracts) {
        let data = contracts; //take the unfiltered data of contracts from the fetch
        if(firstFilter != '') { //first filter refers to the selection of primary officer
            data = data.filter(contract =>
                contract.primaryOfficerInfo.id === firstFilter);
        }
        if(secondFilter != '') { //second filter referes to the selection of the secondary officer
            data = data.filter(contract =>
                contract.secondaryOfficerInfo.id === secondFilter);
        }
        if(searchBar != '') {   //refers to the manual searching
            data = data.filter(contract => {
                if(contract.title.toLowerCase().includes(searchBar.toLowerCase())) {
                    return contract;
                }
            });
        }
        return data;
    }
}

将其传递到另一个组件

const filteredContracts = this.setFilteredContracts();
<ContractsTable contracts = { filteredContracts }/>

然后最终使用地图将其渲染到我的前端

{contracts &&
  contracts.map(contract => {
    return (
      <MenuItem
        key={contract.primaryOfficerInfo.id}
        value={contract.primaryOfficerInfo.id}
      >
        {contract.primaryOfficerInfo.firstName +
          " " +
          contract.primaryOfficerInfo.lastName}
      </MenuItem>
    );
  })}

但是如果我有两个Jane Doe,它们出现在我的菜单项中,我只需要一个Jane Doe,我将如何实现?

0 个答案:

没有答案