How to change data type of some elements in an array in JavaScript

Question

I would like to change the type of some elements in an (nested) array, and the only way I know is to run a for loop.

Please see the example below:

The data is of the form

var chartdata = [
  ["1980/01/23", 95, 100, 98, 110],
  ["1980/01/24", 98, 98, 102, 103],
  ["1980/01/25", 90, 102, 95, 105],
  ["1980/01/26", 93, 95, 103, 103],
  ["1980/01/27", 94, 103, 104, 105],
];

I would like to change to

var new_data = [
  [new Date("1980/01/23"), 95, 100, 98, 110],
  [new Date("1980/01/24"), 98, 98, 102, 103],
  [new Date("1980/01/25"), 90, 102, 95, 105],
  [new Date("1980/01/26"), 93, 95, 103, 103],
  [new Date("1980/01/27"), 94, 103, 104, 105],
];

The only way I come up with is a for loop

function transform(arr) {
  var new_arr = [];

  for (var i = 0; i < arr.length; i++) {
    var sub_arr = [];
    for (var j = 0; j < arr[i].length; j++) {
      if (j == 0) {
        sub_arr.push(new Date(arr[i][j]));
      } else {
        sub_arr.push(arr[i][j]);
      }
    }
    new_arr.push(sub_arr);
  }
  return new_arr
}
alert(transform(chartdata));

Is there better way to achieve this?

@ Crazy Train, sorry for the imprecise words. I shall use 'efficient' or 'faster' way. — skippyho
– skippyho, Commented May 11, 2018 at 1:15
The answers you received below are not necessarily written with performance as the primary objective. As to what is fastest, only performance tests will tell you that, and it will vary between implementations. — user2437417
– user2437417, Commented May 11, 2018 at 1:18

CertainPerformance · Accepted Answer · 2018-05-11 00:53:10Z

Use .map to transform one array into another:

const chartdata = [
  ["1980/01/23", 95, 100, 98, 110],
  ["1980/01/24", 98, 98, 102, 103],
  ["1980/01/25", 90, 102, 95, 105],
  ["1980/01/26", 93, 95, 103, 103],
  ["1980/01/27", 94, 103, 104, 105],
];
const newData = chartdata.map(([dateStr, ...rest]) => [new Date(dateStr), ...rest]);
console.log(newData);

For ES5 compatibility, you won't be able to use rest/spread and arrow functions, so another option is:

var chartdata = [
  ["1980/01/23", 95, 100, 98, 110],
  ["1980/01/24", 98, 98, 102, 103],
  ["1980/01/25", 90, 102, 95, 105],
  ["1980/01/26", 93, 95, 103, 103],
  ["1980/01/27", 94, 103, 104, 105],
];
var newData = chartdata.map(function(arr) {
  var date = new Date(arr[0]);
  return [date].concat(arr.slice(1));
});
console.log(newData);

return [date, arr.slice(1)]; will give another nested array. return [].concat(date, arr.slice(1))

MrPizzaFace · Accepted Answer · 2018-05-11 01:36:33Z

3

Sure you could simply do this:

const chartdata = [
  ["1980/01/23", 95, 100, 98, 110],
  ["1980/01/24", 98, 98, 102, 103],
  ["1980/01/25", 90, 102, 95, 105],
  ["1980/01/26", 93, 95, 103, 103],
  ["1980/01/27", 94, 103, 104, 105],
];

const newData = chartdata.map(arr => {
  arr[0] = new Date(arr[0]);
  return arr;
});

console.log(newData);

If you don't want to mutate the original array:

const newData = chartdata.map(([...arr]) => {
    arr[0] = new Date(arr[0]);
    return arr;
});

You can also do it in one line with param destructing like this:

const newData = chartdata.map(([date, ...rArr]) => [new Date(date), ...rArr]);

edited May 11, 2018 at 1:36

answered May 11, 2018 at 0:54

MrPizzaFace

8,12616 gold badges84 silver badges125 bronze badges

4 Comments

ibrahim mahrir Over a year ago

This will mutate the original array. You might as well use forEach instead

MrPizzaFace Over a year ago

Yes it will in the first example, I'm assuming newData is all op cares about. If you care not to mutate, you can simple do [...chartdata].map( ....

ibrahim mahrir Over a year ago

Your "don't want to mutate the original" code is still mutating the original array.

MrPizzaFace Over a year ago

Erm, this is why you (I) should always test your (my) code. Good catch! Answer updated.

Prince Hernandez · Accepted Answer · 2018-05-11 00:49:52Z

actually yes, you are copying a lot of times the content of each inner array, using map and assigning the new value would work.

here you have a working example:

var chartdata = [
  ["1980/01/23", 95, 100, 98, 110],
  ["1980/01/24", 98, 98, 102, 103],
  ["1980/01/25", 90, 102, 95, 105],
  ["1980/01/26", 93, 95, 103, 103],
  ["1980/01/27", 94, 103, 104, 105],
];

function transform(arr) {
  var new_arr = [];

  for (var i = 0; i < arr.length; i++) {
    var sub_arr = [];
    for (var j = 0; j < arr[i].length; j++) {
      if (j == 0) {
        sub_arr.push(new Date(arr[i][j]));
      } else {
        sub_arr.push(arr[i][j]);
      }
    }
    new_arr.push(sub_arr);
  }
  return new_arr
}

function improvedTransform(arr) {
  return arr.map(item => {
    item[0] = new Date(item[0]);
    return item;
  })
}
console.log(transform(chartdata));
console.log("-------");
console.log(improvedTransform(chartdata));

Mamun · Accepted Answer · 2018-05-11 01:06:59Z

1

You can use map() to create a new array from the existing one:

var chartdata = [
  ["1980/01/23", 95, 100, 98, 110],
  ["1980/01/24", 98, 98, 102, 103],
  ["1980/01/25", 90, 102, 95, 105],
  ["1980/01/26", 93, 95, 103, 103],
  ["1980/01/27", 94, 103, 104, 105],
];

var new_data = chartdata.map(function(i){
  var date = new Date(i[0]);
  date = [date].concat(i.slice(1));
  return date;
})

console.log(new_data);

edited May 11, 2018 at 1:06

answered May 11, 2018 at 0:50

Mamun

69k9 gold badges51 silver badges62 bronze badges

1 Comment

Barmar Over a year ago

This modifies the original arrays. Put console.log(chartdata) at the end and you'll see.

Collectives™ on Stack Overflow

How to change data type of some elements in an array in JavaScript

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Related