How can I .filter only unique strings in my array?

Question

I am having a recurring issue with arrays of strings I bring in from a spreadsheet. I want to filter a these arrays of strings for unique values and then fill options in a dropdown for a form.

I have tried multiple solutions, but for some reason none of them works.

function filterContainerDropdown(){

var containerFilterHelper =  inventory.filter(obj => obj.playerid == filterID)
    
  var containerOptions = containerFilterHelper.map(row => ({

      container: row.container,
     
    }));

    const unique = (x, i, a) => a.indexOf(x) == i;
     
    var uniqueContainers = containerOptions.filter(unique);

     console.log('')
     console.log('++++++++uniqueContainers+++++++++++')
     console.table(uniqueContainers); 

    for(var i = 0; i < containerOptions.length; i++) {

      setContainer[setContainer.length] = new Option(containerOptions[i].container,containerOptions[i].container)
        
    }

  }

I have tried solutions online galore. They work with other data. My data is a list of short strings.

EDIT: Are there well known issues with filtering strings for unique values?

EDIT2: The data I am giving it:

0   'Backpack'
1   'Backpack'
2   'Backpack'
3   'Backpack'
4   'Backpack'
5   'Backpack'
6   'Backpack'
7   'Backpack'
8   'Backpack'
9   'Backpack'
10  'Backpack'
11  'Backpack'
12  'Backpack'
13  'Backpack'
14  'Biltong'
15  'Biltong'
16  'Biltong'
17  'Biltong'
18  'Holding or Wearing'
19  'Holding or Wearing'
20  'Holding or Wearing'
21  'Holding or Wearing'
22  'Holding or Wearing'
23  'Holding or Wearing'
24  'Holding or Wearing'
25  'Holding or Wearing'
26  'Holding or Wearing'
27  'Holding or Wearing'
28  'Holding or Wearing'
29  'Holding or Wearing'
30  'Holding or Wearing'
31  'Holding or Wearing'
32  'Holding or Wearing'
33  'Holding or Wearing'
34  'Holding or Wearing'
35  'Holding or Wearing'
36  'Holding or Wearing'
37  'Holding or Wearing'
38  'Holding or Wearing'
39  'Holding or Wearing'
40  'Holding or Wearing'
41  'Location'
42  'Location'
43  'Location'
44  'Location'
45  'Location'
46  'Saddle Bag BL'
47  'Saddle Bag FL'
48  'Saddle Bag FR'
49  ''
50  ''
51  ''
52  ''
53  ''
54  ''
55  ''
56  ''
57  ''
58  ''
59  ''
60  ''
61  ''
62  ''
63  ''
64  ''

The data I want out:

 0  'Backpack'   
 1  'Biltong'   
 2  'Holding or Wearing'      
 3  'Location'        
 4  'Saddle Bag BL'
 5  'Saddle Bag FL'
 6  'Saddle Bag FR'
 7  ''

what is the input, and expected output that you are trying with the above func? — Sunil Lama, May 04 '22 at 22:49
looks like container options holds objects which can't be found using `indexOf` you'll need to use [`findIndex`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex). `const unique = (x, i, a) => a.findIndex(({container})=> x.container === container ) === i;` — pilchard, May 04 '22 at 22:55
@ChrisG that example is NUMBERS this is STRINGS, so clearly not the same? — Matthew Keracher, May 04 '22 at 22:56
These solutions will work perfectly fine for an array of "STRINGS". Objects on the other hand won't be identical. — , May 04 '22 at 22:58
For objects you need to extract the property that you want to make unique. — Barmar, May 04 '22 at 23:01
@pilchard, @Barmar, is there a way that I can turn an array of Objects into just an array? I thought that I had done that with the creation of `containerOptions`? — Matthew Keracher, May 04 '22 at 23:01
You're returning an obect from the `map()` instead just return the property `var containerOptions = containerFilterHelper.map(row => row.container);` — pilchard, May 04 '22 at 23:02

score 2 · Answer 1 · answered May 04 '22 at 23:05

I think you can use the javascript new Set() method. As an example

let arr = ['Backpack','Backpack',  'Holding or Wearing',  'Holding or Wearing','','',''];
let unique = [...new Set(arr)];

console.log(unique) // ['Backpack', 'Holding or Wearing', '']

Titus · Answer 2 · 2022-05-04T23:05:58.400

You made this more complicated than it has to be. You can simplify it to something like this:


function filterContainerDropdown(){
  const values = inventory.filter(({ playerid }) => playerid == filterID)
                   .map(({ container }) => container)
                   .filter((x, i, a) => a.indexOf(x) == i)
                   .map((v) => new Option(v, v));
  setContainer.push(...values);
}

The problem with your approach is that you're running the function that is supposed to filter out duplicates on an array that contains objects. This will filter out duplicate objects in the array not duplicate strings.

Here, I'm mapping the array of objects to an array of strings (..map(({ container }) => container)). This way you'll get the required result.

score 0 · Answer 3 · answered May 04 '22 at 23:21

0

You're returning an obect from the map() instead just return the property

var containerOptions = containerFilterHelper.map(row => row.container);

– pilchard

answered May 04 '22 at 23:21

Matthew Keracher

93
7

How can I .filter only unique strings in my array?

3 Answers3