I have a filter that receives data and then displays it. What I want to do is remove the duplicates from my data, however, I am not sure how I would do it in this case. I am using filter and map together, however, my label keys are not displayed. How can I both map the data in this case and show the label as well as filter the data to remove duplicates?
Here is my code filtering code:
props.dataItem[props.field] = e.target.value
.filter((element, index) => localizedData.indexOf(element) === index)
.map((item) => {
return item.label;
})
.join(',');
props.onChange({
dataIndex: 0,
dataItem: props.dataItem,
field: props.field,
syntheticEvent: e.syntheticEvent,
value: e.target.value,
tabIndex: 0,
});
}
};
const localizedData = [
{ value: 'one', label: 'one', id: 1 },
{ value: 'two', label: 'two', id: 2 },
{ value: 'three', label: 'three', id: 3 },
{ value: 'four', label: 'four', id: 4 },
{ value: 'four', label: 'four', id: 4 },
];
And my entire code:
import React, { useState } from 'react';
import { MultiSelect } from '@progress/kendo-react-dropdowns';
export const SymphonyMultiSelectCell = (props) => {
let dataItemKey = 'value';
let textField = 'label';
const onChange = (e) => {
if (props.onChange) {
console.log('e.target.value...', e.target.value);
let values = e.target.value;
console.log(values);
let arrayLength = values.length;
let dataChangeDisplay = '';
let fieldValues = [];
for (let i = 0; i < arrayLength; i++) {
if (i == arrayLength - 1) {
dataChangeDisplay = dataChangeDisplay + values[i][dataItemKey];
} else {
dataChangeDisplay = dataChangeDisplay + values[i][dataItemKey] + ',';
}
fieldValues.push(values[i]);
console.log('fieldValues', fieldValues);
}
props.dataItem[props.field] = e.target.value
.filter((element, index) => localizedData.indexOf(element) === index)
.map((item) => {
return item.label;
})
.join(',');
props.onChange({
dataIndex: 0,
dataItem: props.dataItem,
field: props.field,
syntheticEvent: e.syntheticEvent,
value: e.target.value,
tabIndex: 0,
});
}
};
const localizedData = [
{ value: 'one', label: 'one', id: 1 },
{ value: 'two', label: 'two', id: 2 },
{ value: 'three', label: 'three', id: 3 },
{ value: 'four', label: 'four', id: 4 },
{ value: 'four', label: 'four', id: 4 },
];
return (
<td>
<MultiSelect
data={localizedData}
textField="value"
dataItemKey="id"
onChange={onChange}
/>
</td>
);
};
If you want to remove duplicates item in your arr, you can do it in one line:
const uniqueNames = Array.from(new Set(names));
In your filtering logic, you currently are comparing object equality.
What this means is that two different objects with the same properties are still considered distinct.
eg:
({ a: 1, b: 2 }) === ({ a: 1, b: 2 }) // returns false
Thus, your filter expression considers each item distinct as well:
eg:
x = [ { a: 1, b: 2 }, { a: 1, b: 2 } ]
x.filter((element, index) => x.indexOf(element) === index).length // Still is 2
You'll need to explicitly define what equality means in the context of your application between two of the objects for it to appropriately match and remove.