Блог

Главная - Вопросы по программированию - Как отобразить HTML-таблицу с двумя данными Json

Как отобразить HTML-таблицу с двумя данными Json

#javascript #html #json

#javascript #HTML #json

Вопрос:

Я должен отобразить HTML-таблицу из двух данных JSON в соответствии с требованиями пользователя я должен получать данные из двух запросов независимо, поэтому я получаю два json-данных

выполнено почти 85% работы, просто возникла проблема с удалением некоторых значений из data2

Фрагмент

 var data = [{
    "outlet": "S0001",
    "brandcode": "B0002",
    "brandname": "Bakery FG",
    "grn": 5810
  },
  {
    "outlet": "S0001",
    "brandcode": "B0003",
    "brandname": "Finished Goods",
    "grn": 5895
  },
  {
    "outlet": "S0001",
    "brandcode": "B0004",
    "brandname": "Pastry amp; Cake FG",
    "grn": 162810
  },
  {
    "outlet": "S0001",
    "brandcode": "B0005",
    "brandname": "Ice Cream FG",
    "grn": 281591
  },
  {
    "outlet": "S0001",
    "brandcode": "B0006",
    "brandname": "North Indian FG",
    "grn": 3824
  },
  {
    "outlet": "S0002",
    "brandcode": "B0002",
    "brandname": "Bakery FG",
    "grn": 7848
  },
  {
    "outlet": "S0002",
    "brandcode": "B0003",
    "brandname": "Finished Goods",
    "grn": 6970
  },
  {
    "outlet": "S0002",
    "brandcode": "B0004",
    "brandname": "Pastry amp; Cake FG",
    "grn": 136450
  },
  {
    "outlet": "S0002",
    "brandcode": "B0005",
    "brandname": "Ice Cream FG",
    "grn": 242644
  },
  {
    "outlet": "S0002",
    "brandcode": "B0006",
    "brandname": "North Indian FG",
    "grn": 8618
  }
]
var data2 = [{
    "netAmount": 587714 // i am trying to populate this on netAmount of S0001
    "outlet": "S0001"
  },
  {
    "netAmount": 115257,
    "outlet": "S0002" // i am trying to populate this on netAmount of S0002  and total of S0001 S0002=individual sales Total
  }

]


let formatData = function(data) {
  let brandcodes = [];
  let outlets = [];
  data.forEach(element => {
    if (brandcodes.indexOf(element.brandcode) == -1) {
      brandcodes.push(element.brandcode);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    brandcodes: brandcodes,
    outlets: outlets,

  };
};
var totalSalesPercentage = ''; //this one is to display percentage for Total column
var olWiseSalesPercentage = ''; // tghis one is to show percentage for outlet columns
let renderTable = function(data) {
  brandcodes = data.brandcodes;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById("BillCountTable");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0; //this is grand total for total column
  let grandNetAmount = 0; //this is the one to populate all total of netamount
  let outletWiseTotal = {}; //this one is outlet wise total object
  let outletWiseNetamount = {}; //and this one to populate outlet wise netamount
  th = document.createElement("th");
  th.colSpan = 2;
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {

    th = document.createElement("th");
    th.colSpan = 2;
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);

    outletWiseTotal[element] = 0; //this one is to store olwise total whatr i am looking for to calculate percentage
    // outletWiseNetamount[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element]  = parseInt(el.grn);
        //      outletWiseNetamount[element]  = parseInt(el.netAmount);
      }
    });
    grandTotal  = outletWiseTotal[element];
    // grandNetAmount  = outletWiseNetamount[element];
  });

  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "";
  headerRow.appendChild(th);

  for (i = 0; i < outlets.length   1; i  ) {
    th = document.createElement("th");
    th.innerHTML = "Sales";
    th.classList.add("text-center");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Grn Entery";
    th.classList.add("text-center");
    headerRow.appendChild(th);
  }

  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  headerRow = document.createElement("tr");
  td = document.createElement("th");
  td.innerHTML = "Total";
  td.classList.add("text-center");
  headerRow.appendChild(td);
  let el1 = 0;
  outlets.forEach(element => {
    td = document.createElement("th");
    td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);
    if (element.outlet == element) {
      el1 = element.netAmount;
      //      outletWiseNetamount[element]  = parseInt(el.netAmount);
      console.log(el1)
    }
    console.log(el1)
    td = document.createElement("th");
    td.innerHTML = "netAmount"; //this one is net amount outlet wise which i am getting in data2
    td.classList.add("text-right");
    headerRow.appendChild(td);

  });
  td = document.createElement("th");
  td.innerHTML = "individual sales Total"; //this is also net amount but it is the sum of ll net amount outlet wise
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandTotal.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");
  brandcodes.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);

    let total = 0;
    let totalBCount = 0;
    outlets.forEach(outlet => {
      let el = 0;
      let bc = 0;
      data.forEach(d => {
        if (d.brandcode == element amp;amp; d.outlet == outlet) {
          total  = parseInt(d.grn);
          totalBCount  = parseInt(d.billcount);
          el = d.grn;
          bc = d.billcount;
        }
      });

      olWiseSalesPercentage = (el / outletWiseTotal[outlet]) * 100 // calculating percentage for Total column
      console.log("value :-"   olWiseSalesPercentage)

      td = document.createElement("td");
      td.innerHTML = el.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);
      //console.log("ol wise data -:"  el)
      td = document.createElement("td");
      td.innerHTML = olWiseSalesPercentage.toFixed(2)   "%";
      td.classList.add("text-right");
      row.appendChild(td);
    });
    totalSalesPercentage = (total / grandTotal) * 100 // calculating percentage for Total column

    const totalSalesPercentageFix = totalSalesPercentage.toFixed(2)   "%"
    td = document.createElement("td");
    td.innerHTML = totalSalesPercentageFix;
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = total.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    tbody.appendChild(row);

  });

  table.appendChild(tbody);
  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div align="center">
  <table id=BillCountTable>
  </table>
</div>

На месте netAmount я хочу поместить netAmount данных в json2, а затем вычислить там сумму и отобразить ее в indiuvidual sales Total =netamount of S0001 netamount of S0002

Мой код немного длинный, поэтому я прокомментировал все строки, чтобы вы знали, что я делаю, где

это результат, который я пытаюсь получить

кто-нибудь здесь, пожалуйста, помогите

Комментарии:

1. Там много кода. Каковы имена двух переменных javascript, которые вы пытаетесь сложить вместе, и каково имя переменной, в которой вы хотите сохранить результат?

2. @Cat let grandNetAmount = 0; это общая чистая сумма, которая будет помещена на место individual sales Total и let netAmount=0 для заполнения итоговой суммы на выходе, а также я прокомментировал строку, где я должен поместить эти значения в свой код

Ответ №1:

Просто передайте массив data2 внутри функции render table, затем выполните фильтрацию с учетом выходных данных

 td.innerHTML =data2.filter(a=> a.outlet == element)[0]['netAmount']

Для отдельных продаж всего

 td.innerHTML = data2.reduce((a,b)=> (a = a b.netAmount,a),0); 
  

 var data = [{ "outlet": "S0001", "brandcode": "B0002", "brandname": "Bakery FG", "grn": 5810 }, { "outlet": "S0001", "brandcode": "B0003", "brandname": "Finished Goods", "grn": 5895 }, { "outlet": "S0001", "brandcode": "B0004", "brandname": "Pastry amp; Cake FG", "grn": 162810 }, { "outlet": "S0001", "brandcode": "B0005", "brandname": "Ice Cream FG", "grn": 281591 }, { "outlet": "S0001", "brandcode": "B0006", "brandname": "North Indian FG", "grn": 3824 }, { "outlet": "S0002", "brandcode": "B0002", "brandname": "Bakery FG", "grn": 7848 }, { "outlet": "S0002", "brandcode": "B0003", "brandname": "Finished Goods", "grn": 6970 }, { "outlet": "S0002", "brandcode": "B0004", "brandname": "Pastry amp; Cake FG", "grn": 136450 }, { "outlet": "S0002", "brandcode": "B0005", "brandname": "Ice Cream FG", "grn": 242644 }, { "outlet": "S0002", "brandcode": "B0006", "brandname": "North Indian FG", "grn": 8618 } ];
var data2 = [{ "netAmount": 587714, "outlet": "S0001" }, { "netAmount": 115257, "outlet": "S0002" }
]

let formatData = function(data) {
  let brandcodes = [];
  let outlets = [];
  data.forEach(element => {
    if (brandcodes.indexOf(element.brandcode) == -1) {
      brandcodes.push(element.brandcode);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    brandcodes: brandcodes,
    outlets: outlets,
  };
};
var totalSalesPercentage = ''; //this one is to display percentage for Total column
var olWiseSalesPercentage = ''; // tghis one is to show percentage for outlet columns
let renderTable = function(data, data2) {
  brandcodes = data.brandcodes;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById("BillCountTable");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0; //this is grand total for total column
  let grandNetAmount = 0; //this is the one to populate all total of netamount
  let outletWiseTotal = {}; //this one is outlet wise total object
  let outletWiseNetamount = {}; //and this one to populate outlet wise netamount
  th = document.createElement("th");
  th.colSpan = 2;
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {

    th = document.createElement("th");
    th.colSpan = 2;
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);

    outletWiseTotal[element] = 0; //this one is to store olwise total whatr i am looking for to calculate percentage
    // outletWiseNetamount[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element]  = parseInt(el.grn);
        //      outletWiseNetamount[element]  = parseInt(el.netAmount);
      }
    });
    grandTotal  = outletWiseTotal[element];
    // grandNetAmount  = outletWiseNetamount[element];
  });

  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "";
  headerRow.appendChild(th);

  for (i = 0; i < outlets.length   1; i  ) {
    th = document.createElement("th");
    th.innerHTML = "Sales";
    th.classList.add("text-center");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Grn Entery";
    th.classList.add("text-center");
    headerRow.appendChild(th);
  }

  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  headerRow = document.createElement("tr");
  td = document.createElement("th");
  td.innerHTML = "Total";
  td.classList.add("text-center");
  headerRow.appendChild(td);
  let el1 = 0;
  outlets.forEach(element => {
    console.log(element)
    td = document.createElement("th");
    td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);
    if (element.outlet == element) {
      el1 = element.netAmount;
      //      outletWiseNetamount[element]  = parseInt(el.netAmount);
    }
    td = document.createElement("th");
    td.innerHTML = data2.filter(a => a.outlet == element)[0]['netAmount']; //this one is net amount outlet wise which i am getting in data2
    td.classList.add("text-right");
    headerRow.appendChild(td);

  });
  td = document.createElement("th");
  td.innerHTML = data2.reduce((a, b) => (a = a   b.netAmount, a), 0); //this is also net amount but it is the sum of ll net amount outlet wise
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandTotal.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");
  brandcodes.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);

    let total = 0;
    let totalBCount = 0;
    outlets.forEach(outlet => {
      let el = 0;
      let bc = 0;
      data.forEach(d => {
        if (d.brandcode == element amp;amp; d.outlet == outlet) {
          total  = parseInt(d.grn);
          totalBCount  = parseInt(d.billcount);
          el = d.grn;
          bc = d.billcount;
        }
      });

      olWiseSalesPercentage = (el / outletWiseTotal[outlet]) * 100 // calculating percentage for Total column


      td = document.createElement("td");
      td.innerHTML = el.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);
      //console.log("ol wise data -:"  el)
      td = document.createElement("td");
      td.innerHTML = olWiseSalesPercentage.toFixed(2)   "%";
      td.classList.add("text-right");
      row.appendChild(td);
    });
    totalSalesPercentage = (total / grandTotal) * 100 // calculating percentage for Total column

    const totalSalesPercentageFix = totalSalesPercentage.toFixed(2)   "%"
    td = document.createElement("td");
    td.innerHTML = totalSalesPercentageFix;
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = total.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    tbody.appendChild(row);

  });

  table.appendChild(tbody);
  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData, data2);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div align="center">
  <table id=BillCountTable>
  </table>
</div>

Комментарии:

1. Да, @dheeraj кумар, скажи мне

2. Извини, братан .. я в wrk. пожалуйста, задайте свои сомнения .. я объясню

3. эй, я сам получил ответ 🙂

4. Неплохо. опубликуйте ответ на этот вопрос. это полезно для будущего посетителя

5. да, просто застрял с одной проблемой, после завершения которой обязательно опубликую

Ответ №2:

Приведенный выше код создает элементы dom с помощью JS. Вместо этого мы можем объединить два разных ответа на основе требования и использовать плагин BootstrapTable или использовать стратегию создания шаблонов, такую как handlebars, которая сделает код чистым.

Комментарии:

1. Этот вопрос позволяет получить гораздо лучший ответ с четким фрагментом того, как все должно работать

2. я уже сделал так много вещей, которые вполне понятны