How to construct a new column header from row data in JavaScript?

Question

I am receiving the below metadata and row data response from api and i need to construct s new column based on given Date data for last 7 business date.

const columnMetaData = [
{
code: "id",
name: "Id",
header: "Y",
},
{
code: "stock",
name: "Stock",
header: "Y",
},
{
code: "date",
name: "Date",
header: "Y",
},
{
code: "value",
name: "Value"
header: "Y",
},
{
code: "change_date",
name: "Change date",
header: "Y",
}
];

const rowData = [
{
id: "123",
stock: "BlueChip",
date: "8/20/2020",
value: "5000",
change_date: ""
}
{
id: "123",
stock: "BlueChip",
date: "8/22/2020",
value: "6000",
change_date: ""
}
{
id: "123",
stock: "BlueChip",
date: "8/23/2020",
value: "7000",
change_date: ""
}
];

After receive the metaData and rowData response my table look like this:-

I need to construct a new column based on date so that, i can see data in below format.

Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. — mplungjan, Sep 01 '20 at 11:43
I think myself cleared everything in the problem. There is nothing wrong into my problem. If you have solution then please provide. These thing we normally do into excel but first time i am facing this kind of problem and i need solution or approach. — Vickram, Sep 01 '20 at 12:35
There is nothing (too much) wrong, if you wanted to use this as specification to hand to a developer you _pay_ to get this done for you. If you want our _free_ help here, you have to show your efforts first of all though. This is not a code-writing service. — CBroe, Sep 01 '20 at 12:37
i thought people on SO help each other but anyway no problem — Vickram, Sep 01 '20 at 12:44
You need to group your JSON data by "stock" key. Please check this [link](https://stackoverflow.com/a/38575908/13922040) — LilFlower, Sep 01 '20 at 12:48
There is a big difference between actually asking for help (again, [ask] explains how to do that), and basically just going “I need, you make for me.” — CBroe, Sep 01 '20 at 12:51
@Vickram We sometimes do help ppl with their hard problems with little effort shown, but that is more an exception than the rule. If someone finds the problem really interesting, they can choose to do all your work for you. But most expect a minimum of effort. — mplungjan, Sep 01 '20 at 12:51

score 0 · Accepted Answer · edited Sep 01 '20 at 12:53

This code will create the data structure you need in order to display this data in the form you provided.

If you need help with the html, let me know :)

const reducer = (acc, curr) => {
  var index = acc.findIndex(x => x.key == curr.stock)
  if (index == -1) {
    acc.push({
      key: curr.stock,
      data: [{
        date: curr.date,
        value: curr.value,
        changeDate: curr.change_date
      }]
    })
  } else {
    acc[index].data.push({
      date: curr.date,
      value: curr.value,
      changeDate: curr.change_date
    })
  }
  return acc;
}

const rowData = [{
  id: "123",
  stock: "BlueChip",
  date: "8/20/2020",
  value: "5000",
  change_date: ""
}, {
  id: "123",
  stock: "BlueChip",
  date: "8/22/2020",
  value: "6000",
  change_date: ""
}, {
  id: "123",
  stock: "BlueChip",
  date: "8/23/2020",
  value: "7000",
  change_date: ""
}];

var reducedArray = rowData.reduce(reducer, []);
console.log(reducedArray)

Result object:

But how you will show this in the html with the help of just row data because you haven't construct new column for date ? You can see that in columnMetaData we have "code" key whose value is "date" and in rowData we have key "date" — Vickram, Sep 01 '20 at 12:53
Here's a working codepen I made for you https://codepen.io/Yziv95/pen/OJNjrgR — Yoni Ziv, Sep 01 '20 at 13:07

How to construct a new column header from row data in JavaScript?

1 Answers1