0

I follow this question to achieve the result Remove duplicate values from JS array. Also, I read a lot of stuff like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set, but unfortunately, values are still duplicated

.map((devicedetails, index) => {
  return (
    <option key={index} value={[...new Set(devicedetails.groupName)]}>
      {[...new Set(devicedetails.groupName)]}
    </option>
  );
});

Note: I thought it's clear but **devicedetails ** consists of JSON with multiple values, not just one

Result: enter image description here

Updated:

before return: var list = [];

 filteredList.map((devicedetails, index) => {
                          list.push(devicedetails.groupName);
                          if (list.length === index + 1) {
                            var data = [...new Set(list)];
                            data.forEach((element) => {
                              return <option value={element}>{element}/option>;
                            });
                          }
                        })

But in this case, is returning nothing in option but it's working I check via console.log(element)

Denis
  • 75
  • 7
  • 1
    It cannot work this way. You apply Set to a single value. There should be array of names first instead of devicedetails objects, and this array can be unduped with Set – Estus Flask Sep 10 '22 at 12:26

2 Answers2

1

You need to remove duplicates of the whole array and then map over the version with duplicates removed.

[...new Set(myArray)].map((devicedetails, index) => (
  <option key={index} value={devicedetails.groupName}>
    {devicedetails.groupName}
  </option>
));
Jacob
  • 1,577
  • 8
  • 24
  • Hi @Jacob, thanks for this answer, but unfortunately, it doesn't work because **devicedetails** consist of JSON data, not just one Array – Denis Sep 10 '22 at 17:02
  • Hi @Jacob can you please check the new update, thanks – Denis Sep 12 '22 at 12:41
0

Instead of looping over devicedetails, outside of the return, create a modified array using the spread syntax and set it as a new variable. Then loop over that instead.

e.g.

const array = ['test', 'testing', 'test', 'test1234', 'testing']

const updatedArray = [...new Set(array)]

console.log(updatedArray)
Josh
  • 110
  • 1
  • 7
  • Do you propose to create one separate map extract just a specific value, and after doing the same staff what you have done? – Denis Sep 10 '22 at 17:06