how can I use includes() function on nested arrays?

Question

I have an array like this:

var arr = [];
arr = [['red', 685], ['green', 210], ['blue', 65]];

Also I have two variables:

var color  = 'blue';
var number = 21;

All I'm trying to do is checking the first item of each nested array of arr and then either update the second item of it or make a new array for it.

Here is some examples:

Input:

var color  = 'blue';
var number = 21;

Expected output:

arr = [['red', 685], ['green', 210], ['blue', 21]];

Input:

var color  = 'yellow';
var number = 245;

Expected output:

arr = [['red', 685], ['green', 210], ['blue', 21], ['yellow', 245]];

Here is what I've tried so far:

if ( !arr.includes(color) ) {
    arr.push([color, number]);
} else {
    arr[color] = time;
}

But !arr.includes(color) condition is wrong. Because each item of arr is also an array. Anyway, how can I use includes() function on the first item of nested arrays?

do you only have one level of nesting?

Max Koretskyi
– Max Koretskyi

2017-04-20 06:44:46 +00:00
Commented Apr 20, 2017 at 6:44 — Max Koretskyi
– Max Koretskyi, Commented Apr 20, 2017 at 6:44
@Maximus . . .yes

stack
– stack

2017-04-20 06:45:11 +00:00
Commented Apr 20, 2017 at 6:45 — stack
– stack, Commented Apr 20, 2017 at 6:45

Tushar · Accepted Answer · 2017-04-20 06:49:39Z

20

You cannot directly use includes on nested array, however, you can use find on array.

arr.find(el => el[0] === color)

This will return the element of array found else undefined. The returned value can be used to update the second element in the array.

var arr = [
  ['red', 685],
  ['green', 210],
  ['blue', 65]
];
var color = 'blue';
var number = 21;


function upsert(array, color, number) {
  var exists = arr.find(el => el[0] === color);

  if (exists) {
    exists[1] = number;
  } else {
    arr.push([color, number]);
  }
}

upsert(arr, color, number);
console.log(arr);


var color = 'yellow';
var number = 245;
upsert(arr, color, number);
console.log(arr);

edited Apr 20, 2017 at 6:49

answered Apr 20, 2017 at 6:47

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

4 Comments

stack Over a year ago

Your approach seems great .. but it's a bit vague to implement it on my own example.

Tushar Over a year ago

@stack I've added live demo.

solaire Over a year ago

good answer, works fine. I wonder how the part with el[0] works and why it still finds the element it even though its not the first element in the parent array.

Tushar Over a year ago

@solaire In find el is the element in the parent array. As colour is first element in array, el[0] refers to the colour

gurvinder372 · Accepted Answer · 2017-04-20 06:47:15Z

1

Simply iterate the array and update the value if found, else push a new value

Demo

var arr = [['red', 685], ['green', 210], ['blue', 65]];
console.log(updateArray(arr, 'blue', 21));

function updateArray(arr, color, value)
{
  var isFound = false;
  arr = arr.map( function(item){
     if( item[0] == color )
     {
       isFound = true;
       item[1] = value;
     }
     return item;
  });
  if ( !isFound )
  {
    arr.push([color, value]);
  }
  return arr;
}

answered Apr 20, 2017 at 6:47

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

404answernotfound · Accepted Answer · 2017-04-20 06:46:16Z

0

You should make a loop that cycles through the array because, as you pointed out yourself, each element of the array is itself an array.

If you do:

for(let i = 0; i < arr.length; i++){
   if ( !arr[i].includes(color) ) {
       arr.push([color, number]);
   } else {
       arr[i][1] = time;
   }
}

This way you are checking if the array at position i has the color, if it doesn't you push a new array into the array, otherwise you change the array value at index 1 of the array i

answered Apr 20, 2017 at 6:46

404answernotfound

7717 silver badges21 bronze badges

Collectives™ on Stack Overflow

how can I use includes() function on nested arrays?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related