Как сделать таблицу HTML с различными данными JSON

Question

У меня есть два набора данных JSON, которые data и data2

из данных, которые я заполнил мою таблицу, но из данных2 я хочу заполнить netAmount там, где я сталкиваюсь с проблемой

• У меня есть столбец netamount в направлении по выводу, который называется sales, и один предназначен для столбца Total, также называемого sales as header
• Я просто хочу заполнить значения netAmount в местеиз кодированной строки

код

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 & 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 & 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) {
  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 && 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">
<div align="center">
  <table id=BillCountTable>
  </table>

Я прокомментировал все строки, где я делаю, что бы знать вас всех, ребята

• в месте netamountрозетки S0001 я хочу поставить 587714, которая находится в данных2
• в месте netAmount розетки S0002 я хочу поставить 115257, которая находится в данных2
• и сумма обоих netAmount в individual sales total

Я застрял здесь очень долго, пожалуйста, помогите мне, пожалуйста, не говорите, что ваш код очень длинный, просто наведите меня, как я могу использовать объекты data2которые являются netAmount и выходами внутри моего кода, тогда я могу использовать их в своем коде

[