Add key to array in javascript

Question

I have an array of data, with first line being a header:

[["Date", "Key1", "Key2", "Key3", "Key4"],
["2018-11-01", "254", "-", "-", "-"],
["2018-11-02", "648", "-", "-", "-"],
["2018-11-03", "270", "170", "-", "147"],
["2018-11-04", "300", "406", "136", "208"]]

The output I would like to have to be able to use it with a D3 library graph would be:

[[Date: "2018-11-01", Key1: "254", Key2: "-", Key3: "-", Key4: "-"],
[Date: "2018-11-02", Key1: "648", Key2: "-", Key3: "-", Key4: "-"],
[Date: "2018-11-03", Key1: "270", Key2: "170", Key3: "-", Key4: "147"],
[Date: "2018-11-04", Key1: "300", Key2: "406", Key3: "136", Key4: "208"]]

I tried many unsuccessful variations to do that with javascript, using map. but I can't manage to do it... Keys are dynamic so I can't use fixed keys. Can someone help me? Thank you! Manue

seems like a map and a forEach/reduce.... Show what you tried that failed — epascarello
– epascarello, Commented Nov 19, 2018 at 15:32

Ori Drori · Accepted Answer · 2018-11-19 15:34:25Z

2

For an array of objects, you could map the values and take mapped objects, which are assigned to a single object.

var data = [["Date", "Key1", "Key2", "Key3", "Key4"], ["2018-11-01", "254", "-", "-", "-"], ["2018-11-02", "648", "-", "-", "-"], ["2018-11-03", "270", "170", "-", "147"], ["2018-11-04", "300", "406", "136", "208"]],
    result = data.slice(1).map(a => Object.assign(...a.map((v, i) => ({ [data[0][i]]: v }))));
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Nov 19, 2018 at 15:34

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

answered Nov 19, 2018 at 15:33

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

1 Comment

Tiwelle Over a year ago

Thank you very much! That works exactly as expected!

Mr. Polywhirl · Accepted Answer · 2018-11-19 15:39:51Z

You need to map your inner arrays to objects. You cannot assign key-value pairs within an array construct.

var matrix = [
  [ "Date", "Key1", "Key2", "Key3", "Key4" ],
  [ "2018-11-01", "254", "-", "-", "-" ],
  [ "2018-11-02", "648", "-", "-", "-" ],
  [ "2018-11-03", "270", "170", "-", "147" ],
  [ "2018-11-04", "300", "406", "136", "208" ]
];

console.log(JSON.stringify(matrixToJsonObjectArray(matrix, true), null, 2));

function matrixToJsonObjectArray(matrix, includesHeader) {
 var fields = includesHeader ? matrix[0] : range(matrix[0].length);
 return (includesHeader ? matrix.slice(1) : matrix).map(row => {
  var obj = {};
  fields.forEach((field, i) => obj[field] = row[i]);
  return obj;
 });
}

function range(start, end) {
  var arr = [];
  if (end === undefined) end = start, start = 0;
  for (var i = start; i < end; i++) arr.push(i); 
  return arr;
}

.as-console-wrapper { top: 0; max-height: 100% !important; }

Ori Drori · Accepted Answer · 2018-11-19 15:41:10Z

You can create a zipObject method that converts to arrays to object using Array.reduce(), and use it with Array.map() to combine the header array, with the other arrays:

const data = [["Date", "Key1", "Key2", "Key3", "Key4"], ["2018-11-01", "254", "-", "-", "-"], ["2018-11-02", "648", "-", "-", "-"], ["2018-11-03", "270", "170", "-", "147"], ["2018-11-04", "300", "406", "136", "208"]];

// zip two arrays to an object
const zipObject = (keys) => (values) =>
  keys.reduce((r, key, i) => ({ ...r, [key]: values[i] }), {});
  
// convert a two dimensional array to object
const arrToObj = ([keys, ...values]) => values.map(zipObject(keys));

const result = arrToObj(data);
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Collectives™ on Stack Overflow

Add key to array in javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related