Check if Filename Already Exists in an Array

Question

How can I check if a certain file name already exists in my array? For example, on initial load, I get some files from the server:

var initialFiles = ['file1_1','file2_0','file3_3','file4_2','file5_6'];

I push them to an array and set in sessionStorage:

filesArray.push(initialFiles);
sessionStorage.setItem('file-names', JSON.stringify(filesArray));

Then after a user interacts with the site, I get more files:

var newFiles = ['file1_1', 'file2_0', 'file1_2', 'file3_5', 'file4_6'];

You can see that file1_1 and file2_0 have already been loaded. How do I NOT add those file names in the array?

See an example here: http://jsbin.com/hiyefexudi/edit?html,js,console

Answer 1

You can check to see if each file in the new array is in the old one using indexOf == -1

fiddle: https://jsfiddle.net/L42h7uhm/

var initialFiles = ['file1_1', 'file2_0', 'file3_3', 'file4_2', 'file5_6'];

var newFiles = ['file1_1', 'file2_0', 'file1_2', 'file3_5', 'file4_6'];

newFiles.forEach(function (file) {
    console.log(initialFiles.indexOf(file) == -1);
});

Answer 2

You can concatenate both arrays and filter out non-unique items.

var initialFiles = ['file1_1', 'file2_0', 'file3_3', 'file4_2', 'file5_6'];

var newFiles = ['file1_1', 'file2_0', 'file1_2', 'file3_5', 'file4_6'];

var newArray = initialFiles.concat(newFiles);

var uniqueArray = newArray.filter(function(item, pos) {
    return newArray.indexOf(item) == pos;
});

console.log(uniqueArray);

Answer 3

Using ES6 semantics (modern browser, transpiled code or latest node.js), you can more efficiently use a Set object which will automatically keep duplicates out.

 var files = new Set(['file1_1','file2_0','file3_3','file4_2','file5_6']);
 var newFiles = ['file1_1', 'file2_0', 'file1_2', 'file3_5', 'file4_6'];
 files.add(...newFiles);

 sessionStorage.setItem('file-names', JSON.stringify(Array.from(files)));

Working demo: http://jsfiddle.net/jfriend00/7d1dy1p7/

MDN reference on the Set object

---

And, there are numerous polyfills for the Set object too as it is a generally useful concept, particularly for things like this. Here's one I've created: Mimicking sets in JavaScript?

---

Or, if you're trying to find out which items in the newFiles list are actually new and not in the files list already, then you can do that like this.

 var files = new Set(['file1_1','file2_0','file3_3','file4_2','file5_6']);
 var newFiles = ['file1_1', 'file2_0', 'file1_2', 'file3_5', 'file4_6'];

 var uniqueNewFiles = newFiles.filter(function(item) {
     return !files.has(item);
 });

Then, afterwards to update the existing files list, you can add these to it:

 files.add(...uniqueNewFiles);

---

Or, using a more capable Set object , you could do this:

 var files = new Set(['file1_1','file2_0','file3_3','file4_2','file5_6']);
 var newFiles = new Set(['file1_1', 'file2_0', 'file1_2', 'file3_5', 'file4_6']);

  var uniqueNewFiles = newFiles.difference(files);