I have the object below with different arrays and I want to remove the duplicate names that are showing. How can I do that?
The data is being printed this way
The dsUserId is what is being repeated. And I want to be able to remove duplicate dsUserId
Here is where all the data is being generated.
this.setState({
user_connections: results.data.data.connections,
newLeads: results2.data.data,
promotion: results3.data.data,
hasPromotion: results3.data.data.length === 0 ? false : true,
promoPlan: promoPlan,
toRemoveDays: excludedDays
});
console.log("All data", this.state.user_connections)
}
And here is where the data is being rendered.
<select
id="user_select"
style={{ width: "70%" }}
name="selectedUser"
onChange={e => {
this.setState({
[e.target.name]: e.target.value.trim()
});
}}
className="form-control"
>
<option value={null} disabled hidden selected>
Please Select
</option>
{this.state.user_connections.map(u => (
<option value={u.parentId} key={u.parentId}>
{u.displayName}
</option>
))}
</select>
You can use filter to achieve this for eg:
const userConnections = (connections) => {
const uniqueIds = [];
return connections.filter(connection => {
if (!uniquesIds.includes(connection.dsUserId) {
uniqueIds.push(connection.dsUserId);
return connection;
}
})
};
and then :
user_connections: userConnections(results.data.data.connections)
Not sure if the best way, but I would first make a Set of all the unique dsUserIds and then filter the first in the user_connections array for each dsUserId:
let tsUserIds = [];
this.state.user_connections.forEach(user => {
tsUserIds.push(user.dsUserId);
})
tsUserIds = [...new Set(tsUserIds)]; // filters out the duplicates
let uniqueConnections = [];
tsUserIds.forEach(id => {
uniqueConnections.push(this.state.user_connections.filter(user => user.dsUserId === id)[0]);
})
console.log(uniqueConnections);