[Vuejs]-Display objects with the same key in one row

by

0👍

I think you should parse your data array before. If it is a possibility for you, this could be the code:

var source = [
    {"key":["0114","1","2013"],"values":["279"]},
    {"key":["0114","1","2014"],"values":["235"]},
    {"key":["0114","1","2015"],"values":["258"]},
    {"key":["0114","1","2016"],"values":["274"]},
    {"key":["0114","1","2017"],"values":["293"]}
];

var parsed = {};

for (var i=0; i<source.length; i++) {
    var key = source[i].key;
    if (!(source[i].key[0] in parsed)) {
        parsed[source[i].key[0]] = {};
    }
    if (!(source[i].key[1] in parsed[source[i].key[0]])) {
        parsed[source[i].key[0]][source[i].key[1]] = {};
    }
    if (!(source[i].key[2] in parsed[source[i].key[0]][source[i].key[1]])) {
        parsed[source[i].key[0]][source[i].key[1]][source[i].key[2]] = 0;
    }
    parsed[source[i].key[0]][source[i].key[1]][source[i].key[2]] += parseInt(source[i].values);
}

console.log(parsed);

0👍

You can simply do it with the reduce function as so:

const data = [
    {"key":["0114","1","2013"],"values":["279"]},
    {"key":["0114","1","2014"],"values":["235"]},
    {"key":["0114","1","2015"],"values":["258"]},
    {"key":["0114","1","2016"],"values":["274"]},
    {"key":["0114","1","2017"],"values":["293"]}
];

const tableRows = data.reduce((rows, value) => {
  let currentRow = rows.find(row => row.region === value.key[0] && row.gender === value.key[1]);
  if (!currentRow) {
    currentRow = {region: value.key[0], gender: value.key[1]};
    rows.push(currentRow);
  }
  currentRow[value.key[2]] = value.values[0];
  return rows;
}, []);

console.log(tableRows);

Leave a comment