How can I map a nested array in JS

Question

Here is my array:

const main = [
  [['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369']],
];

and here is my function:

const convertor = (x) => {
  const splitted = x.split(':');
  console.log(splitted);
  const converted = splitted[0] * 60 + splitted[1] * 60 + splitted[2];
  return converted;
};

I want to map this function on each nested array

I tried this but I got an error:

const resu = main.map((x) => {
  x.map((y) => {
    convertor(y);
  });
});

x.split is not a function

Does this answer your question? [Map an array of arrays](https://stackoverflow.com/questions/35325767/map-an-array-of-arrays) — nanquim, Nov 29 '21 at 12:25
@KrzysztofKrzeszewski expected output should be timestamps converted to seconds. for example : 02:50:20,656 turns into : 312020,656 — moemous, Nov 29 '21 at 12:28
The `.map()` callback has to return the new value. Your callbacks don't return anything. — Andreas, Nov 29 '21 at 12:29
_"x.split is not a function"_ - `x` is an array and not a string. — Andreas, Nov 29 '21 at 12:32

score 1 · Answer 1 · answered Nov 29 '21 at 12:36

Issues

Note that there are 3 level nested arrays, so there should be 3 maps()
return is required if you use {} in the arrow function

const main = [
  [['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369']],
];

const convertor = (x) => {
  const splitted = x.split(':');
  const converted = splitted[0] * 60 + splitted[1] * 60 + splitted[2];
  return converted;
};

const resu = main.map((x) => {
  return x.map((y) => {
    return y.map((z) => {
      return convertor(z);
    });
  });
});

console.log(resu);

Shorter version

main.map(x => x.map(y => y.map(convertor)));

zakhefron · Answer 2 · 2021-11-29T12:43:15.753

const main = [
  [
    ['02:20:21,369'],
    ['02:20:21,369'],
    ['02:20:21,369'],
    ['02:20:21,369']
  ],
  [
    ['02:20:21,369'],
    ['02:20:21,369']
  ],
  [
    ['02:20:21,369'],
    ['02:20:21,369'],
    ['02:20:21,369']
  ],
  [
    ['02:20:21,369']
  ],
];


const convertor = (x) => {
  const splitted = x.split(':');
  //console.log(splitted);
  const converted = splitted[0] * 60 + splitted[1] * 60 + splitted[2];
  return converted;
};

const mappedMain = main.map(i => {
 return i.map(j => {
  return convertor(...j)
 })
})

//Or
//const mappedMain = main.map(i => i.map(j => convertor(...j)))



console.log(mappedMain);

score 1 · Accepted Answer · answered Nov 29 '21 at 12:40

You made some mistakes:

Expression (x) => { /* a few lines of code */ } requires the use of the return keyword to return the result, while (x) => /* single line of code */ doesn't.
Your array main is three-dimensional array, not two-dimensional.

Try this:

const resu = main.map((x) => {
  return x.map((y) => {
    return y.map(convertor);
  });
});

Or easier:

const resu = main.map(
    (x) => x.map(
        (y) => y.map(convertor)
    )
);

const main = [
  [['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369']],
];

const convertor = (x) => {
  const splitted = x.split(':');
  const converted = splitted[0] * 60 + splitted[1] * 60 + splitted[2];
  return converted;
};

const resu = main.map(
    (x) => x.map(
        (y) => y.map(convertor)
    )
);

console.log(resu);

_"while (x) => /* single line of code */ doesn't"_ - That's not a matter of single line or not. `{ }` creates a block. And that's what triggers the need of an explicit `return`. This is also the reason why you have to wrap an object in `( )` without an explicit `return`: (foo) => `({ bar: foo })` — Andreas, Nov 29 '21 at 14:28

score 1 · Answer 4 · answered Nov 29 '21 at 12:41

Another approach could be to recursively go through the array(s). This way you are not limited to a specific depth level.

const main = [
  [['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369'], ['02:20:21,369'], ['02:20:21,369']],
  [['02:20:21,369']],
];

const convertor = (x) => {
  const splitted = x.split(':');
  // console.log(splitted);
  const converted = splitted[0] * 60 + splitted[1] * 60 + splitted[2];
  return converted;
};

const convertTimeToSec = (arr) => {
  for(let i = 0, length = arr.length; i < length; i++) {
    if(Array.isArray(arr[i])) {
      arr[i] = convertTimeToSec(arr[i]);
    }else{
      arr[i] = convertor(arr[i]);
    }
  }
  
  return arr;
}

console.log(convertTimeToSec(main));

How can I map a nested array in JS

4 Answers4