convert flat json to nested json typescript that will be used to generate HTML table in UI

Question

I am trying to convert flat JSON to nested JSON to print an HTML table in angular. The final expected output JSON is used to generate the HTML in the UI.

My function that converts flat JSON to nested JSON:

buildTableData(tableDataList: any) {
    const testObj = {
        name: "",
        metrics: Array<typeof dynamicTableValues>()
    };

    let dynamicTableValues = {
        name: "",
        source: "",
        data: Array<typeof dataObj>()
    };

    let dataObj = {
        value: "",
        color: "",
        entity: ""
    };

    const testObjList = Array<typeof testObj>();
    let uniquecategories: string[] = [];
    // sorting the category and building dynamic table objects
    tableDataList.forEach(element => {
        uniquecategories = element.map(data => data.category_name)
            .filter((value, index, self) => self.indexOf(value) === index);
    });
    for (let i = 0; i < uniquecategories.length; i++) {
        testObjList.push({
            name : uniquecategories[i],
            metrics: []
        });
    }
    tableDataList.forEach(element => {
        element.forEach((data, index) => {
            for (let i = 0; i < uniquecategories.length; i++) {
                dynamicTableValues = {
                    name: "",
                    source: "",
                    data: Array<typeof dataObj>()
                };
                if (uniquecategories[i] === data.category_name) {
                    dynamicTableValues.name = data.metric_name;
                    dynamicTableValues.source = data.threshold_source;
                    for (const [key] of Object.entries(data)) {
                        dataObj = {
                            value: data.count + data.valueType,
                            color: data.color,
                            entity: data.date
                        };
                        dynamicTableValues.data.push(dataObj);
                    }
                    testObjList[i].metrics.push(dynamicTableValues);
                }
            }
        });
    });
    return testObjList;
}

Here is the flat JSON that I get from DB:

{
  "d3Data": [
    {
        "category_name": "Control",
        "metric_name": "ERA",
        "threshold_source": "KPI",
        "metric_type": "ASC",
        "flag": "Y",
        "date": "1-Jan-21",
        "count": "1",
        "valueType": "",
        "color": "GREEN",
    },
    {
        "category_name": "Control",
        "metric_name": "ERA",
        "threshold_source": "KPI",
        "metric_type": "ASC",
        "flag": "Y",
        "date": "1-Feb-21",
        "count": "1",
        "valueType": "%",
        "color": "GREY",
    },
    {
        "category_name": "Control",
        "metric_name": "ERA",
        "threshold_source": "KPI",
        "metric_type": "ASC",
        "flag": "Y",
        "date": "1-Mar-21",
        "count": "1",
        "valueType": "%",
        "color": "RED",
    },
    {
        "category_name": "Control",
        "metric_name": "Data Periodic",
        "threshold_source": "LOB RAS",
        "metric_type": "ASC",
        "flag": "",
        "date": "1-Jan-21",
        "count": "1",
        "valueType": "%",
        "color": "AMBER",
    },
    {
        "category_name": "Control",
        "metric_name": "Data Periodic",
        "threshold_source": "LOB RAS",
        "metric_type": "ASC",
        "flag": "N/A",
        "date": "1-Feb-21",
        "count": "250",
        "valueType": "",
        "color": "GREEN",
    },
    {
        "category_name": "Control",
        "metric_name": "Data Periodic",
        "threshold_source": "LOB RAS",
        "metric_type": "ASC",
        "flag": "N/A",
        "date": "1-Mar-21",
        "count": "250",
        "valueType": "%",
        "color": "RED",
    },
    {
        "category_name": "Complete",
        "metric_name": "Data Breach",
        "threshold_source": "LOB RAS",
        "metric_type": "ASC",
        "flag": "N/A",
        "date": "1-Jan-21",
        "count": "2.5",
        "valueType": "%",
        "color": "RED",
    },
    {
        "category_name": "Complete",
        "metric_name": "Data Breach",
        "threshold_source": "LOB RAS",
        "metric_type": "ASC",
        "flag": "N/A",
        "date": "1-Feb-21",
        "count": "2088",
        "valueType": "",
        "color": "GREEN",
    },
    {
        "category_name": "Complete",           
        "metric_name": "Data Breach",
        "threshold_source": "LOB RAS",
        "metric_type": "ASC",
        "flag": "N/A",
        "date": "1-Mar-21",
        "count": "250",
        "valueType": "%",
        "color": "RED",
    },
  ]
}

The current output that I am getting with the above function:

[
  {
    "name": "Control",
    "metrics": [
      {
        "name": "ERA",
        "source": "KPI",
        "data": [
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          },
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          },
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          },
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          },
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          },
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          },
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          },
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          },
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          },
          {
            "value": "1",
            "color": "GREEN",
            "entity": "1-Jan-21"
          }
        ]
      },
      {
        "name": "ERA",
        "source": "KPI",
        "data": [
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          },
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          },
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          },
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          },
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          },
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          },
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          },
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          },
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          },
          {
            "value": "1%",
            "color": "GREY",
            "entity": "1-Feb-21"
          }
        ]
      },
      {
        "name": "ERA",
        "source": "KPI",
        "data": [
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "1%",
            "color": "RED",
            "entity": "1-Mar-21"
          }
        ]
      },
      {
        "name": "Data Periodic",
        "source": "LOB RAS",
        "data": [
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          },
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          },
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          },
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          },
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          },
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          },
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          },
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          },
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          },
          {
            "value": "1%",
            "color": "AMBER",
            "entity": "1-Jan-21"
          }
        ]
      },
      {
        "name": "Data Periodic",
        "source": "LOB RAS",
        "data": [
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "250",
            "color": "GREEN",
            "entity": "1-Feb-21"
          }
        ]
      },
      {
        "name": "Data Periodic",
        "source": "LOB RAS",
        "data": [
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          }
        ]
      }
    ]
  },
  {
    "name": "Complete",
    "metrics": [
      {
        "name": "Data Breach",
        "source": "LOB RAS",
        "data": [
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          },
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          },
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          },
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          },
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          },
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          },
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          },
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          },
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          },
          {
            "value": "2.5%",
            "color": "RED",
            "entity": "1-Jan-21"
          }
        ]
      },
      {
        "name": "Data Breach",
        "source": "LOB RAS",
        "data": [
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          },
          {
            "value": "2088",
            "color": "GREEN",
            "entity": "1-Feb-21"
          }
        ]
      },
      {
        "name": "Data Breach",
        "source": "LOB RAS",
        "data": [
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          },
          {
            "value": "250%",
            "color": "RED",
            "entity": "1-Mar-21"
          }
        ]
      }
    ]
  }
]

Expected output:

[
  {
    "name": "Control",
    "metrics": [
        {
            "name": "ERA",
            "source": "KPI",
            "data": [
                {
                    "value": "1",
                    "color": "GREEN",
                    "entity": "1-Jan-21"
                },
                {
                    "value": "89",
                    "color": "GREEN",
                    "entity": "1-Feb-21"
                },
                {
                    "value": "300%",
                    "color": "AMBER",
                    "entity": "1-Mar-21"
                }
            ]
        },
        {
            "name": "Data Periodic",
            "source": "LOB RAS",
            "data": [
                {
                    "value": "1%",
                    "color": "RED",
                    "entity": "1-Jan-21"
                },
                {
                    "value": "20",
                    "color": "GREEN",
                    "entity": "1-Feb-21"
                },
                {
                    "value": "125",
                    "color": "RED",
                    "entity": "1-Mar-21"
                }
            ]
        }
    ]
  },
  {
      "name": "Complete",
      "metrics": [
          {
              "name": "Data Breach",
              "source": "LOB RAS",
              "data": [
                  {
                      "value": "2.5%",
                      "color": "RED",
                      "entity": "1-Jan-21"
                  },
                  {
                      "value": "1",
                      "color": "RED",
                      "entity": "1-Feb-21"
                  },
                  {
                      "value": "300%",
                      "color": "GREEN",
                      "entity": "1-Mar-21"
                  }
              ]
          }
      ]
  }
]

score 0 · Answer 1 · answered Mar 04 '22 at 06:36

0

If my understanding is correct you want to format the data with proper alignment.

Similar Question: Pretty Print JSON using javascript

All you need is to prettify the JSON

Few Examples

JSON.stringify(jsObj, null, "\t"); // stringify with tabs inserted at each level
JSON.stringify(jsObj, null, 4);    // stringify with 4 spaces at each level

Demo: http://jsfiddle.net/AndyE/HZPVL/

document.getElementById("table").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

answered Mar 04 '22 at 06:36

Dificilcoder

449
5
11

Hello, thank you for your response. I am not looking for JSN formatting, I want to generate the expected out using the JSON that I am getting from DB – user105935 Mar 04 '22 at 07:39

convert flat json to nested json typescript that will be used to generate HTML table in UI

1 Answers1