How can I filter an array without losing the index?

Question

I have two very long arrays containing "image names" and "image files". The first is the actual name of the images, and the second is just the file name. For instance:

picturenames[0] = '0 - zero'; picturenames[1] = '1 - one'; picturenames[2] = '1 o\'clock'; ... picturefiles[0] = 'numbers-zero.jpg'; picturefiles[1] = 'numbers-one.jpg'; picturefiles[2] = 'time-1.jpg'; ... 

I have about 1000 elements in each array in several languages ​​(image files are always the same). I “recycle” these arrays from the previous application to save time and not rewrite everything again.

Desired functionality : using user input in a text box, I want to filter out the picturenames array and then show the corresponding picturefiles image.

The problem I am facing : when filtering an array of picturenames I lose the index and I cannot "reach" the image file name.

This is the code that I use to filter the picturenames array.

 var matches = picturenames.filter(function(windowValue){ if(windowValue) { return windowValue.indexOf(textToFindLower) >= 0; } }); 

What would be the best way to do this?

UPDATE : Ahmed's solution is the best, but for time reasons and minor performance issues, I just use the for loop to search the array as follows:

  var matchesCounter = new Array(); for (i = 0; i < picturenames.length; i++) { if (picturenames[i].indexOf(textToFindLower) >= 0) { matchesCounter.push(i); } } console.log(matchesCounter); for (i = 0; i < matchesCounter.length; i++) { console.log(picturenames[i]); console.log(picturefiles[i]); } 

Answer 1

You can add one index property during filtering, and then you can use index .

 var matches = picturenames.filter(function(windowValue, index){ if(windowValue) { windowValue.index = index; return windowValue.comparator(textToFindLower) >= 0;// Need to define comparator function } }); 

Later you can access using the following command:

 picturefiles[matches[0].index] 

However, the solution will work on the object, not the primitive string.

If your data type is a string, you need to convert it as an object and put the string as the value of a property, for example name . Below is a snippet:

 var picturenames = []; var picturefiles = []; picturenames.push({name:'0 - zero'}); picturenames.push({name:'1 - one'}); picturenames.push({name:'1 o\'clock'}); picturefiles.push({name:'numbers-zero.jpg'}); picturefiles.push({name:'numbers-one.jpg'}); picturefiles.push({name: 'time-1.jpg'}); var textToFindLower = "0"; var matches = picturenames.filter(function(windowValue, index){ if(windowValue) { windowValue.index = index; return windowValue.name.indexOf(textToFindLower) >= 0; } }); console.log(matches); 

Answer 2

Try the following:

 const foundIndicies = Object.keys(picturenames).filter(pictureName => { pictureName.includes(textToFindLower) }); // reference picturefiles[foundIndicies[0]] to get the file name 

Although, it would be much better to have both the name and the file in one object, for example:

 const pictures = [ { name: '0 - zero', file: 'numbers-zero.jpg', }, { name: '1 - one', file: 'numbers-one.jpg', } ]; const foundPictures = pictures.filter(picture => picture.name.includes('zero')); if (foundPictures[0]) console.log(foundPictures[0].file);