I have two really long arrays containing "picture names" and "picture files". The first one represents the actual name of the pictures, while the second one is just the file name. For 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';
...

I have about 1000 items in each array in several languages (the picture files are always the same). I'm "recycling" these arrays from the previous application to save some time and avoid rewriting everything anew.

Desirable functionality: using the user's input in a textbox I want to filter the picturenames array and then show the correspondant picturefiles image.

The issue I'm facing: when I filter the picturenames array I lose the index and I can't "reach" the picture file name.

This is the code I'm using 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: the solution proposed by Ahmed is the best one, but for time reasons and negligible performance issues I'm just using a for loop to search trough 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]);
        }

I have two really long arrays containing "picture names" and "picture files". The first one represents the actual name of the pictures, while the second one is just the file name. For 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';
...

I have about 1000 items in each array in several languages (the picture files are always the same). I'm "recycling" these arrays from the previous application to save some time and avoid rewriting everything anew.

Desirable functionality: using the user's input in a textbox I want to filter the picturenames array and then show the correspondant picturefiles image.

The issue I'm facing: when I filter the picturenames array I lose the index and I can't "reach" the picture file name.

This is the code I'm using 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: the solution proposed by Ahmed is the best one, but for time reasons and negligible performance issues I'm just using a for loop to search trough 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]);
        }

• javascript
• arrays
• filter

Share Improve this question Follow edited Mar 26, 2018 at 3:42 swanhella 44111 gold badge66 silver badges1414 bronze badges asked Mar 26, 2018 at 2:02 devamatdevamat 2,51399 gold badges3333 silver badges5757 bronze badges 2

• 2 why wouldn't you just have them as an object instead? – A. L Commented Mar 26, 2018 at 2:10
• I would rather not rewrite all the vocabulary: we are talking about 1000 items for the pictures and around 350 items for the audio files, in 7 languages. – devamat Commented Mar 26, 2018 at 2:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Try this:

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

Though, it would be far nicer to have both the name and the file in a single object, like so:

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);

You can add one property index during the filtering time, then later on you can use the index.

var matches = picturenames.filter(function(windowValue, index){

if(windowValue) {
    windowValue.index = index;
    return windowValue.parator(textToFindLower) >= 0;// Need to define parator function
}
});

Later on you can access by using like follows:

picturefiles[matches[0].index]

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

If your data type is string, then you have to convert as object and put the string as a property value like name. The snippet is given below:

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);