Javascript 如何为HTML表创建所需的JSON？

这是我的视图Html表。我缺乏json制作，我不知道如何用JavaScript填充它，因为outlet name也有列span

我正在从JSON数据创建HTML表。我被表格的格式所困扰。请查看新图像：

我想让它像

我已经为此创建了一个JSON格式，如下所示

[
                      {
                            "Billdate": "01-08-18",
                            "Total": "90",
                            "Ol1-total": "20",
                            "c1": "2",
                            "c2": "4",
                            "c3": "6",
                            "c4": "8",
                            "Ol2-total": "36",
                            "c1": "10",
                            "c2": "12",
                            "c3": "14",
                            "Ol3-total": "34",
                            "c2": "16",
                            "c3": "18"
                          },
                          {
                            "Billdate": "02-08-18",
                            "Total": "150",
                            "Ol1-total": "66",
                            "c1": "20",
                            "c2": "22",
                            "c3": "0",
                            "c4": "24",
                            "Ol-total": "54",
                            "c1": "26",
                            "c2": "28",
                            "c3": "0",
                            "Ol-total": "30",
                            "c2": "22",
                            "c3": "30"
                          }
                        ]

但是它不是一个有效的JSON，因为这个键在这里不是唯一的。我应该如何设计JSON格式或更改表的视图？我不能两者兼得

我正在发布我的JavaScript代码，通过该代码填充我的表：

 function addTable() {
         var col = Object.keys(tableValue[0]);     // get all the keys from first object


             var countNum = col.filter(i => !isNaN(i)).length;        
            var num = col.splice(0, countNum);                            
            col = col.concat(num); 



                                                                        // shift the first item to last
                                                                        // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

                                                        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1);                       // TABLE ROW.


      for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");             // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

                                                            // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < tableValue.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = tableValue[i][col[j]];
        }
    }

                                                              // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("newTable");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
}


         addTable()

函数addTable（）{
var col=Object.keys（tableValue[0]）；//从第一个对象获取所有键
var countNum=col.filter（i=>！isNaN（i））.length；
var num=列拼接（0，countNum）；
col=col.concat（num）；
//将第一项移到最后一项
//创建动态表。
var table=document.createElement（“表”）；
//使用上面提取的标题创建HTML表格标题行。
var tr=table.insertRow（-1）；//表行。
对于（变量i=0；i

每个日期都是一个键，值是表示计数器的二维数组

我删除了总数，因为它们都只是各自组的总数，可以通过编程进行汇总。但是，如果愿意，您可以将它们添加回末尾/开头

{
  '01-08-18': [['2', '4', '6', '8'], ['10', '12', '14'], ['16', '18']],
  '02-08-18': [['20', '22', '0', '24'], ['26', '28', '0'], ['22', '30']]
}

下面是javascript的一个解决方案：

“严格使用”
常数testdata={
'01-08-18': [['2', '4', '6', '8'], ['10', '12', '14'], ['16', '18']],
'02-08-18': [['20', '22', '0', '24'], ['26', '28', '0'], ['22', '30']]
}
const table=document.getElementById（'表'）
//创建标题，只考虑表中的第一个元素
const firstKey=Object.keys（testdata）[0]
const header=document.getElementById（'tableheader'）
//加总th
const totalth=document.createElement（'th'）
totalth.innerHTML=“行总数”
header.append（totalth）
for（设i=0；i{
//加总
const total=ol.reduce（（总和，当前）=>sum+parseInt（当前），0）
rowTotal+=总计
const totaltd=document.createElement（'td'）
totaltd.innerHTML=总计
行。追加（totaltd）
//添加单个值
ol.map（c=>{
const td=document.createElement（'td'）
td.innerHTML=c
行追加（td）
})
})
//更新行总td
rowtotaltd.innerHTML=rowTotal
我++
}

表格{
边框：1px纯黑；
}
运输署{
边框：1px纯黑；
}

比尔达特

请尝试告诉我任何问题

数据=[{
“金额”：49644，
“账单日期”：“2018-09-01”，
“柜台”：“北印度”，
“出口”：“JAYANAGAR”
},
{
“金额”：194495，
“账单日期”：“2018-09-01”，
“柜台”：“南印度-1-Flr”，
“出口”：“JAYANAGAR”
},
{
“金额”：80768，
“账单日期”：“2018-09-01”，
“柜台”：“外卖柜台1”，
“出口”：“JAYANAGAR”
},
{
“金额”：60878，
“账单日期”：“2018-09-01”，
“柜台”：“咖啡柜台”，
“出口”：“JAYANAGAR”
},
{
“金额”：81999，
“账单日期”：“2018-09-01”，
“柜台”：“交易位置1”，
“出口”：“JAYANAGAR”
},
{
“金额”：8642，
“账单日期”：“2018-09-01”，
“柜台”：“交易Pos 2”，
“出口”：“JAYANAGAR”
},
{
“金额”：53822，
“账单日期”：“2018-09-01”，
“柜台”：“餐厅”，
“出口”：“MALLESHWARAM”
},
{
“金额”：15339，
“账单日期”：“2018-09-01”，
“柜台”：“咖啡柜台”，
“出口”：“MALLESHWARAM”
},
{
“金额”：7548，
“账单日期”：“2018-09-01”，
“柜台”：“外卖”，
“出口”：“MALLESHWARAM”
},
{
“金额”：15432，
“账单日期”：“2018-09-01”，
“柜台”：“交易POS”，
“出口”：“MALLESHWARAM”
},
{
“金额”：107602，
“账单日期”：“2018-09-01”，
“柜台”：“餐厅”，
“出口”：“科拉尔”
},
{
“金额”：7711，
“账单日期”：“2018-09-01”，
“柜台”：“交易POS”，
“出口”：“科拉尔”
},
{
“金额”：39，
“账单日期”：“2018-09-02”，
“柜台”：“北印度”，
“出口”：“JAYANAGAR”
},
{
“金额”：118647，
“账单日期”：“20