JSFiddle - React, Tailwind, and code Playground

by chauhangs

HTML

<div id="table">
    <div>

JavaScript

var summary = {"trafficSummary":[{"type":"NFC_WLT_RG","detailsList":[{"mno":"ES","type":"NFC_WLT_RG","identifier":"23001","value":"1"},{"mno":"IT","type":"NFC_WLT_RG","identifier":"23007","value":"61"},{"mno":"DE","type":"NFC_WLT_RG","identifier":"23006","value":"28"},{"mno":"IT","type":"NFC_WLT_RG","identifier":"23001","value":"2"},{"mno":"IT","type":"NFC_WLT_RG","identifier":"23006","value":"29"},{"mno":"DE","type":"NFC_WLT_RG","identifier":"23007","value":"26"},{"mno":"UK","type":"NFC_WLT_RG","identifier":"23001","value":"1"},{"mno":"UK","type":"NFC_WLT_RG","identifier":"23006","value":"2"},{"mno":"DE","type":"NFC_WLT_RG","identifier":"23001","value":"1"}]},{"type":"DPLY_SCV","detailsList":[{"mno":"DE","type":"DPLY_SCV","identifier":"23006","value":"15"},{"mno":"IT","type":"DPLY_SCV","identifier":"23007","value":"1"},{"mno":"UK","type":"DPLY_SCV","identifier":"23006","value":"8"},{"mno":"DE","type":"DPLY_SCV","identifier":"23007","value":"1"},{"mno":"IT","type":"DPLY_SCV","identifier":"23006","value":"16"}]}]};



builtable(summary);

function builtable(data) {

    
var tableHeader = '<table border="1"><tr><th>OpCo</th><th>OK</th> <th>In progress</th> <th>NOK</th></tr>';
var tableFooter = '</table>';
var rowHTML = "";

var statusArry = [];
var opCoMap = {};
var statusMap = {};
    $.each(data.trafficSummary, function (index, entry) {

        if (entry.type == "NFC_WLT_RG") {

            $.each(entry.detailsList, function (index, entry) {
                //console.log(entry.mno + " : " + entry.identifier + ":" + entry.value);
                statusMap = {};
                statusMap[entry.identifier] = entry.value;

                if (opCoMap.hasOwnProperty(entry.mno)) {

                    statusArry = opCoMap[entry.mno];
                    statusArry.push(statusMap);

                } else {
                    statusArry = [];
                    statusArry.push(statusMap);
                    opCoMap[entry.mno] = statusArry;
                }


     ...