Как создать необходимый JSON для таблицы HTML?

Question

Это мой вид HTML-таблицы.Мне не хватает создания json, и я не знаю, как его заполнить JavaScript, потому что имя выхода также имеет интервал столбца.

Я создаюHTML-таблица из данных JSON.Я застрял с тем, что должно быть в формате моего стола.Пожалуйста, смотрите новое изображение:

, и я хочу сделать его похожим на

Я создал для этого формат 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 я должен проектировать или мне следует изменить представление таблицы?Я не могу сделать и то и другое.

Если кто-то считает, что мой вид таблицы должен быть таким, пожалуйста, поделитесь со мной.Или у кого-нибудь есть правильный формат 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()

Answer 1

Плз Попробуйте и дайте мне знать, если какие-либо проблемы.

data = [{
    "amount": 49644,
    "billdate": "2018-09-01",
    "counter": "North Indian",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 194495,
    "billdate": "2018-09-01",
    "counter": "South Indian-1-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 80768,
    "billdate": "2018-09-01",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 60878,
    "billdate": "2018-09-01",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 81999,
    "billdate": "2018-09-01",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 8642,
    "billdate": "2018-09-01",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 53822,
    "billdate": "2018-09-01",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 15339,
    "billdate": "2018-09-01",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 7548,
    "billdate": "2018-09-01",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 15432,
    "billdate": "2018-09-01",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 107602,
    "billdate": "2018-09-01",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 7711,
    "billdate": "2018-09-01",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  },
  {
    "amount": 39,
    "billdate": "2018-09-02",
    "counter": "North Indian",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 118647,
    "billdate": "2018-09-02",
    "counter": "South Indian-1-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 119871,
    "billdate": "2018-09-02",
    "counter": "South Indian-2-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 109527,
    "billdate": "2018-09-02",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 64771,
    "billdate": "2018-09-02",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 78037,
    "billdate": "2018-09-02",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 20261,
    "billdate": "2018-09-02",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 69946,
    "billdate": "2018-09-02",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18197,
    "billdate": "2018-09-02",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 8741,
    "billdate": "2018-09-02",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18820,
    "billdate": "2018-09-02",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 78537,
    "billdate": "2018-09-02",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 5060,
    "billdate": "2018-09-02",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  },
  {
    "amount": 49096,
    "billdate": "2018-09-03",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58477,
    "billdate": "2018-09-03",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 49933,
    "billdate": "2018-09-03",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 9915,
    "billdate": "2018-09-03",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 51209,
    "billdate": "2018-09-03",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 2566,
    "billdate": "2018-09-03",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  }
];

function formatData(data) {
  let toReturn = [];
  let dateWiseObj = {};
  let maxUniqueForOutlets = {};
  data.forEach(function(d) {
    if (!maxUniqueForOutlets[d["outlet"]]) {
      maxUniqueForOutlets[d["outlet"]] = [];
    }
    if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
      maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
    }

    if (!dateWiseObj[d["billdate"]]) {
      dateWiseObj[d["billdate"]] = {};
      dateWiseObj[d["billdate"]][d["outlet"]] = {};
      dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
    } else {
      if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
        dateWiseObj[d["billdate"]][d["outlet"]] = {};
        dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
      } else {
        if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
          dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
        }
      }
    }

  });

  return {
    dateWiseObj: dateWiseObj,
    maxUniqueForOutlets: maxUniqueForOutlets
  };
};


function addTable(dataObj) {
  let dateWiseObj = dataObj.dateWiseObj;
  let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "Outlet";
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = "Total";
  headerRow.appendChild(th);
  Object.keys(maxUniqueForOutlets).forEach(function(d) {
    th = document.createElement("th");
    th.innerHTML = d;
    th.colSpan = maxUniqueForOutlets[d].length + 1;
    headerRow.appendChild(th);
  });
  table.appendChild(thead);
  thead.appendChild(headerRow);

  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "Date";
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = "Counter";
  headerRow.appendChild(th);
  Object.keys(maxUniqueForOutlets).forEach(function(k) {
    th = document.createElement("th");
    th.innerHTML = "Total";
    headerRow.appendChild(th);
    maxUniqueForOutlets[k].forEach(function(d) {
      th = document.createElement("th");
      th.innerHTML = d;
      headerRow.appendChild(th);
    });
  });
  table.appendChild(thead);
  thead.appendChild(headerRow);

  let tbody = document.createElement("tbody");
  Object.keys(dateWiseObj).forEach(function(k) {
    let row = document.createElement("tr");

    let td = document.createElement("td");
    td.innerHTML = k;
    row.appendChild(td);

    grandTotal = 0;
    outletWiseTotal = {};
    Object.keys(maxUniqueForOutlets).map(function(d) {
      outletWiseTotal[d] = 0;
      if (dateWiseObj[k][d]) {
        Object.keys(dateWiseObj[k][d]).forEach(function(i) {
          outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
        });
      }
      grandTotal += outletWiseTotal[d];
    });
    td = document.createElement("td");
    td.innerHTML = grandTotal;
    row.appendChild(td);

    Object.keys(maxUniqueForOutlets).map(function(d) {
      td = document.createElement("td");
      td.innerHTML = outletWiseTotal[d];

      row.appendChild(td);
      if (dateWiseObj[k][d]) {
        maxUniqueForOutlets[d].forEach(function(i) {
          td = document.createElement("td");
          td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
          row.appendChild(td);
        });
      } else {
        maxUniqueForOutlets[d].forEach(function(i) {
          td = document.createElement("td");
          td.innerHTML = "0";
          row.appendChild(td);
        });
      }
    });
    tbody.appendChild(row);
    //console.log(outletWiseTotal);
  });
  table.appendChild(tbody);
  let divContainer = document.getElementById("tbl");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
}

var dataObj = formatData(data);
addTable(dataObj);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="tbl"></div>

Answer 2

Каждая дата является ключом, а значение представляет собой двумерный массив, представляющий счетчики.

Я удалил итоги, поскольку все они являются просто суммами соответствующих групп и могут суммироваться программно.Однако вы можете добавить их обратно в конец / начало, если хотите.

{
  '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:

'use strict'
const 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('table')

// Create header, considering only first element from table
const firstKey = Object.keys(testdata)[0]
const header = document.getElementById('tableheader')
// add total th
const totalth = document.createElement('th')
totalth.innerHTML = "Row Total"
header.append(totalth)


for (let i = 0; i < testdata[firstKey].length; i++) {
  const O = document.createElement('th')
  O.innerHTML = `O${i + 1} total`
  header.append(O)
  for (let j = 0; j < testdata[firstKey][i].length; j++) {
    const th = document.createElement('th')
    th.innerHTML = `c${j + 1}`
    header.append(th)
  }
}

// Fill in the data
let i = 0
for (let key in testdata) {
  const row = table.appendChild(document.createElement('tr'))
  let datetd = document.createElement('td')
  datetd.innerHTML = key
  row.append(datetd)
  //apend this rows total so we can update it after the loop
  const rowtotaltd = document.createElement('td')
  row.append(rowtotaltd)
  let rowTotal = 0
  testdata[key].map(ol => {
    // add total
    const total = ol.reduce((sum, current) => sum + parseInt(current), 0)
    rowTotal += total
    const totaltd = document.createElement('td')
    totaltd.innerHTML = total
    row.append(totaltd)
    //add individual values
    ol.map(c => {
      const td = document.createElement('td')
      td.innerHTML = c
      row.append(td)
    })
  })
  //update row total td
  rowtotaltd.innerHTML = rowTotal
  i++
}

table {
  border: 1px solid black;
}

td {
  border: 1px solid black;
}

<table id='table'>
  <tr id='tableheader'>
    <th>Billdate</th>
  </tr>
</table>