Display Complex key-value pair in AG-Grid

Question

I have a map that I am sending to Angular via API and I would like to display it in ag-grid. The map has key as date and value as a list of objects This is how the map looks like:

{ 2019-12-23 00:00:00.0: Array(3),2019-05-24 00:00:00.0: Array(1)}

This is how the object looks like {"id":5, "amt":10,"status":new}

So I want the display the same in ag-grid such that I can sort it on the basis of the amt field. So something like:

(Assume from above map obj1,obj2,obj3 are in the first array i.e. having key as 2019-12-23 00:00:00.0 and obj4 having key as 2019-05-24 00:00:00.0 and assume obj1.amt > obj4.amt > obj2.amt > obj3.amt).

2019-12-23 00:00:00.0 | obj1.id| obj1.amt |obj1.status
2019-05-24 00:00:00.0 | obj4.id| obj4.amt |obj4.status
2019-12-23 00:00:00.0 | obj2.id| obj2.amt |obj2.status
2019-12-23 00:00:00.0 | obj3.id| obj3.amt |obj3.status

How can I achieve this? Any code snippet would be helpful. Thanks

Answer 1

implementation could be different based on time property

Do you need time in the table?

if - NO - solution will be much easier

const entireObject = {
[new Date(1000).toISOString()]: [ {"id":5, "amt":10,"status":'new'},  {"id":6, "amt":10,"status":'new'}],
[new Date(2000).toISOString()]: [ {"id":7, "amt":10,"status":'new'},  {"id":8, "amt":10,"status":'new'}]
}
const outputData = Object.values(entireObject).flat();
console.log(outputData)

if - YES

const entireObject = {
[new Date(1000).toISOString()]: [ {"id":5, "amt":10,"status":'new'},  {"id":6, "amt":10,"status":'new'}],
[new Date(2000).toISOString()]: [ {"id":7, "amt":10,"status":'new'},  {"id":8, "amt":10,"status":'new'}]
}
const outputData = Object.entries(entireObject).map(([time, arr]) => arr.map( i => ({...i, time}))).flat();
console.log(outputData);

DEMO: https://plnkr.co/edit/97AVLXG8GeSzc7wo

example