Convert key, values JSON array to tabular JSON format

Question

I have following JSON data for Chart

var chartJson = [
    {
        header : '2016',
        values : [1, 5, 9]
    },
    {
        header : '2017',
        values : [2, 4, 8]
    },
    {
        header : '2018',
        values : [3, 1, 5]
    }
];

And needs to convert it into this format to feed my HTML table

var tableJson = [
    {
        2016 : 1,
        2017 : 2,
        2018 : 3
    },
    {
        2016 : 5,
        2017 : 4,
        2018 : 1
    },
    {
        2016 : 9,
        2017 : 8,
        2018 : 5
    }
];

Any quick help will be appreciated to convert it into this format. I tried using this code, but somehow missing on the logic.

let table = [];
    for(var row of chartJson ){
        for(var value of row.values)
        {
            table.push(
                {
                    column : row.header,
                    value : value
                });
        }
    }

values are always with 3 elements?

Yoel
– Yoel

2020-12-03 07:48:55 +00:00
Commented Dec 3, 2020 at 7:48 — Yoel
– Yoel, Commented Dec 3, 2020 at 7:48
@Yoel, I would assume not.

myjobistobehappy
– myjobistobehappy

2020-12-03 07:50:36 +00:00
Commented Dec 3, 2020 at 7:50 — myjobistobehappy
– myjobistobehappy, Commented Dec 3, 2020 at 7:50

topdev87 · Accepted Answer · 2020-12-03 07:51:17Z

3

var chartJson = [{
    header: '2016',
    values: [1, 5, 9]
  },
  {
    header: '2017',
    values: [2, 4, 8]
  },
  {
    header: '2018',
    values: [3, 1, 5]
  }
];

let table = [];
chartJson.forEach((row, index) => {
  row.values.forEach((val, j) => {
    table[j] = { ...table[j],
      [row.header]: val
    }
  });
});

console.log(table)

answered Dec 3, 2020 at 7:51

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

2 Comments

topdev87 Over a year ago

it means, keep the original json, and just add a new (key:val).

topdev87 Over a year ago

table[0] will be {2016: 1}, and for the latter forEach, table[0] would be {2016:1, 2017:2}

Shahnawaz Hossan · Accepted Answer · 2020-12-03 08:12:11Z

0

Iterate through every chartJson's element with its' values(through inner loop) till values' length and make an object from that.
Finally, push that object into the table array.

That's it.

Have a look at the snippet below:

var chartJson = [
    {
        header: '2016',
        values: [1, 5, 9]
    },
    {
        header: '2017',
        values: [2, 4, 8]
    },
    {
        header: '2018',
        values: [3, 1, 5]
    }
];

let table = [];
let len_of_chartJson = chartJson.length, len_of_values = chartJson[0].values.length;

for (var i = 0; i < len_of_chartJson; i++) {
    let obj = {};
    for (var j = 0; j < len_of_values; j++) {
        obj[chartJson[j].header] = chartJson[j].values[i];
    }
    table.push(obj);
}

console.log(table);

edited Dec 3, 2020 at 8:12

answered Dec 3, 2020 at 8:06

Shahnawaz Hossan

2,7062 gold badges15 silver badges24 bronze badges

Comments

Syed Jailani · Accepted Answer · 2020-12-03 08:07:19Z

0

let table = chartJson.reduce((tbl, rec) => {
          rec.values.forEach((num, index) => {
                  if(!tbl[index]){
                          tbl[index] = {}
                  }
                  tbl[index][rec.header] = num
          })
          return tbl
          }, [])

Array reduce function is used to loop through each object, than for each object it loop through each value, checking if the index exist in the table, if it does not exist, it create an empty object at current index. Finally it creates a key value in the current index object.

You read more about reduce function below https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

answered Dec 3, 2020 at 8:07

Syed Jailani

1715 bronze badges

Collectives™ on Stack Overflow

Convert key, values JSON array to tabular JSON format

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related