javascript find matching variables between two nested arrays

Question

I have two nested arrays.

arr1 = [["image1","shirt", "collared",40],["image3","shirt", "buttoned",40]]
arr2 = [["image1","blue"],["image2","red"]]

The desired output is : If the image names (image) match, I want to return the color from the second array to a variable.

I have tried using two for loops:

var color = for (var i = 0; i < arr1.length; i++ ) {
for (var j = 0; j < arr2.length; j++ ) {
if (arr1[i][0] === arr2[j][0]) {
return arr2[j][1]
}
}

Since this is a larger part of a program, The first loop gets executed much before the second loop...however both are nested into each other in the order that I have specified.....I am trying to using the variable to color some html elements, but my entire program gets halted. I am not sure if my approach is right.

You missed a quote before blue: ["image1",blue"]. This should be a typo... — FZs
– FZs, Commented Feb 6, 2019 at 17:38
@epascarello How could I return the color from the second arr? — Apricot
– Apricot, Commented Feb 6, 2019 at 17:39

Duncan Thacker · Accepted Answer · 2019-02-06 17:41:08Z

1

Feels like you're trying to use the second array as a lookup into the first. Here's a way to do this by transforming it into an object:

 function toLookupTable(shirtColors) {

     //keys will be image names, values will be colors
     const lookupTable = {};

     shirtColors.forEach(shirtColor => {
         //use array destructuring
         const [ image, color ] = shirtColor;
         lookupTable[image] = color;
     });
     return lookupTable;
 }

 const colorLookup = toLookupTable( [["image1","blue"],["image2","red"]] );

 console.log(colorLookup["image2"]); //outputs "red"

answered Feb 6, 2019 at 17:41

Duncan Thacker

5,1891 gold badge12 silver badges24 bronze badges

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

2 Comments

epascarello Over a year ago

personally I would have just used reduce.

Duncan Thacker Over a year ago

Yeah, I find reduce can be quite hard-to-read and intimidating for novices. Could also have done it easily with lodash.

kemicofa · Accepted Answer · 2019-02-06 17:42:54Z

1

Use Array#reduce and Array#findIndex

I want to return the color from the second array to a variable.

const arr1 = [["image1","shirt", "collared",40],["image3","shirt", "buttoned",40]]
const arr2 = [["image1", "blue"],["image2","red"]]

const res = arr2.reduce((a,[image,color])=>{
   if(arr1.findIndex(([n])=>n===image) > -1) a.push(color);
   return a;
}, []);

console.log(res);

answered Feb 6, 2019 at 17:42

kemicofa

17.7k10 gold badges92 silver badges145 bronze badges

Comments

Code Maniac · Accepted Answer · 2019-02-06 17:45:05Z

0

You can use reduce

let arr1 = [["image1","shirt", "collared",40],["image3","shirt", "buttoned",40]];
let arr2 = [["image1","blue"],["image2","red"]];

let op = arr1.reduce((out,inp,index)=>{
  if(arr2[index].includes(inp[0])){
    out.push(arr2[index][1])
  }
  return out
},[] )

console.log(op)

answered Feb 6, 2019 at 17:45

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Collectives™ on Stack Overflow

javascript find matching variables between two nested arrays

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related