In my code, I have two extensive arrays containing "picture names" and "picture files". The first array holds the actual names of the pictures, while the second array consists of file names. Here is an example:
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';
...
Each array contains around 1000 items in various languages (the picture files remain constant). I am reusing these arrays from a previous application to save time and avoid starting from scratch.
Functionality desired: I aim to filter the picturenames array based on user input in a textbox and then display the corresponding image from the picturefiles array.
Challenge faced: When filtering the picturenames array, I lose track of the index, making it difficult to link to the picture file name.
Below is the code snippet I am using to filter the picturenames array.
var matches = picturenames.filter(function(windowValue){
if(windowValue) {
return windowValue.indexOf(textToFindLower) >= 0;
}
});
What would be the best approach to tackle this issue?
UPDATE: Although the solution suggested by Ahmed is optimal, due to time constraints and negligible performance impact, I have opted to use a for loop to search through the array as shown below:
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]);
}