Pairing multiple javascript arrays

Question

I'm trying to solve a problem I have with multiple javascript arrays.

So basically the result I want is to match the arrays of a dropdown box with other values from other arrays that I will display.

The arrays contain different values, but the order is the most important thing

var array1 = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22];
var array2 = [30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50];
var array3 = [36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56];

Let's say the user selects number 4, then I need to somehow select 32 in array2 and 38 in array3.

Any suggestions are gladly accepted, Thanks!

Just use array2[array1.indexOf(4))?

Bergi
– Bergi

2014-09-23 14:24:23 +00:00
Commented Sep 23, 2014 at 14:24 — Bergi
– Bergi, Commented Sep 23, 2014 at 14:24

thefourtheye · Accepted Answer · 2014-09-23 14:24:20Z

3

Get the index from the first array, with Array.prototype.indexOf
```
var index = array1.indexOf(4);
```
Get the values from other arrays with that index, like this
```
console.log(array2[index], array3[index]);
```

Note: If the value being searched is not found in the array, indexOf will not fail with an error but it will simply return -1. So, you might want to check before using that to access the elements from other arrays, like this

var index = array1.indexOf(4);
if (index !== -1) {
    console.log(array2[index], array3[index]);
} else {
    console.log("Invalid element selected");
}

answered Sep 23, 2014 at 14:24

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bergi Over a year ago

(2a. test that the number was actually found, i.e. index != -1) - although the array access would yield undefined here which might be desirable

thefourtheye Over a year ago

@Bergi Actually, OP says the user is picking the values from a dropdown box. That is why I left that.

Bergi Over a year ago

Oh, right, but in that case you might not need to use indexOf at all and just apply select2.options[select1.selectedIndex].value…

thefourtheye Over a year ago

@Bergi I am not very good with DOM. Could you please make that as an answer? That is very straight forward and simple. I would be happy to upvote :-)

Matt Burland · Accepted Answer · 2014-09-23 14:30:14Z

Any time you have multiple parallel arrays, you should really consider refactoring it into a single array of objects. That way you never have to worry about keeping them synched. For example:

var myArray = [ { val1: 2, val2: 30, val3: 36 }, { val1: 4, val2: 32, val3: 38 }, ...];

Now to find the value for 4 you can simply do something like (although a simple for loop might be more efficient since you know there is only ever one result):

var myValues = myArray.filter(function(item) { return item.val1 === 4 });

And then access myValues[0].val2 and myValues[0].val3.

Or, if you are always looking up by the first value, you can use that as your key for an object that maps to your other two values. Something like:

var myArray = { 2: { val2: 30, val3: 36 }, 4: { val2: 32, val3: 38 },...};

Now if you want the other two values for 4 you can simply:

var value2 = myArray[4];
var value3 = myArray[4];

Bergi · Accepted Answer · 2014-09-23 14:48:02Z

3

Assuming those are not only arrays and values, but you have actual <select> dropdown boxes:

Accessing the selected value is not only possible by using select1.value, but also by using select1.options[select1.selectedIndex].value. That.selectedIndex is what we are interested in, and you can use that equivalently on the option collections of the other two dropdowns, or the arrays with their values:

select2.options[select1.selectedIndex].value
array2[select1.selectedIndex]
select3.options[select1.selectedIndex].value
array3[select1.selectedIndex]

If you access them via the options collection you will need to make sure that one option is actually selected (select1.selectedIndex != -1), otherwise you'd get an exception.

edited Sep 23, 2014 at 14:48

answered Sep 23, 2014 at 14:38

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

2 Comments

andrex Over a year ago

This is if and only if the array1 values and the select options have the same arrangement. What if not? I wonder.

Bergi Over a year ago

Yes, that's the premise (i took it for granted). Thanks for pointing it out! If they are somehow garbled, you'd need to search for it like in thefourtheye's answer.

andrex · Accepted Answer · 2014-09-23 14:42:11Z

0

Do it like this,

var valueFromSelect = 4;


var array1 = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22];
var array2 = [30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50];
var array3 = [36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56];

for(var i = 0; i < array1.length; i++){
   if(valueFromSelect == array1[i]){
       console.log(array2[i], array3[i]);
       break;
   }
}

I suggest you don't use indexOf, it's not compatible with IE < 9 read more about that here indexOf MDN

edited Sep 23, 2014 at 14:42

answered Sep 23, 2014 at 14:33

andrex

1,0326 silver badges16 bronze badges

8 Comments

Matt Burland Over a year ago

I wouldn't use a for..in to iterate other an array where a simple for(var i = 0; i < array1.length; i++) would suffice.

Bergi Over a year ago

I suggest not to use for…in on arrays. And if you want to support oldIE, then just shim indexOf instead of avoiding it!

andrex Over a year ago

@MattBurland yeah you are right, I was thinking of other language thanks for that.

andrex Over a year ago

@Bergi I think indexOf is not compatible with older IE

Bergi Over a year ago

@andrex: It's compatible, it only isn't natively available. You can trivially shim it

|

Collectives™ on Stack Overflow

Pairing multiple javascript arrays

4 Answers 4

4 Comments

Comments

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related