如何将由代码创建的 html 表转换为 json 对象？ AngularJS

Posted 2023-02-15

【中文标题】如何将由代码创建的 html 表转换为 json 对象？ AngularJS

【英文标题】：How to transform a html table created from code to json object? AngularJS

【发布时间】：2021-07-23 14:03:39

【问题描述】：

我有一个用 AnguljarJS 中的代码创建的包含大量数据的 html 表。

如何将此表转换为 JSON？此表未在 HTML 文件中绘制。我已经尝试了一切，但我无法改变它。我知道有一个名为 tableToJSON 的方法，但它只适用于 HTML 中的表格。

let table = document.createElement("table");

table.id = "table";

table.style.display = "none";

let header = table.createTHead();

let row = header.insertRow(0);
row.style.fontWeight = "bold";
row.style.textAlign = "center";
row.style.backgroundColor = "#e2f0ff";
row.style.color = "#04408f";

let cell0 = row.insertCell(0);
cell0.innerHTML = this.$filter("translate")("repository.periodo");

let cell1 = row.insertCell(1);
cell1.innerHTML = this.$filter("translate")("informes.operaciones.areaNegAcc");

let cell2 = row.insertCell(2);
cell2.innerHTML = this.$filter("translate")("repository.dividendos.nomAccionista");

let cell3 = row.insertCell(3);
cell3.innerHTML = this.$filter("translate")("ampliacion.tipope");

let cell4 = row.insertCell(4);
cell4.innerHTML = this.$filter("translate")("informes.operaciones.areaNegPart");

let cell5 = row.insertCell(5);
cell5.innerHTML = this.$filter("translate")("informes.operaciones.nombrePart");

let cell6 = row.insertCell(6);
cell6.innerHTML = this.$filter("translate")("repository.dividendos.porParticipacion");

let cell7 = row.insertCell(7);
cell7.innerHTML = this.$filter("translate")("repository.operaciones.varPorcentaje");

let cell8 = row.insertCell(8);
cell8.innerHTML = this.$filter("translate")("informes.operaciones.saldoEur");


let tBody = document.createElement("tbody");
table.appendChild(tBody);

for (let i = 0; i < vm.listOper.length; i++) 
  var rowTb = tBody.insertRow(i);
  rowTb.style.textAlign = "center";
  rowTb.style.color = "#04408f";

  var celltB1 = rowTb.insertCell(0);
  celltB1.innerHTML = vm.listOper[i].codPeriodoc;

  var celltB2 = rowTb.insertCell(1);
  celltB2.innerHTML = vm.listOper[i].desUnidpetAcc;

  var celltB3 = rowTb.insertCell(2);
  celltB3.innerHTML = vm.listOper[i].codAccion + "-" + vm.listOper[i].desAccion;

  var celltB4 = rowTb.insertCell(3);
  celltB4.innerHTML = vm.listOper[i].desTipoOper;

  var celltB5 = rowTb.insertCell(4);
  celltB5.innerHTML = vm.listOper[i].desUnidpetPart;

  var celltB6 = rowTb.insertCell(5);
  celltB6.innerHTML = vm.listOper[i].codParticip + "-" + vm.listOper[i].desParticip;

  var celltB7 = rowTb.insertCell(6);
  celltB7.innerHTML = vm.listOper[i].porParticipFormat + "%";

  var celltB8 = rowTb.insertCell(7);
  celltB8.innerHTML = vm.listOper[i].varPor ? vm.listOper[i].varPor : "-";

  var celltB9 = rowTb.insertCell(8);
  celltB9.innerHTML = vm.listOper[i].saldoEurFormat;


return table;

【参考方案1】：

这是一种非常无角度的方法，并且因为您是直接写入 DOM，所以在操作或转换它时，您是在自取其辱。

考虑将您的表构建重构为如下所示：

let tabledata = []
    tabledata.push([
    this.$filter("translate")("repository.periodo"),
    this.$filter("translate")("informes.operaciones.areaNegAcc"),
    this.$filter("translate")("repository.dividendos.nomAccionista"),
    this.$filter("translate")("ampliacion.tipope"),
    this.$filter("translate")("informes.operaciones.areaNegPart"),
    this.$filter("translate")("informes.operaciones.nombrePart"),
    this.$filter("translate")("repository.dividendos.porParticipacion"),
    this.$filter("translate")("repository.operaciones.varPorcentaje"),
    this.$filter("translate")("informes.operaciones.saldoEur)
]);


var elem
for (let i = 0; i < vm.listOper.length; i++) 
    elem = vm.listOper[i]
    tabledata.push([
        elem.codPeriodoc,
        elem.desUnidpetAcc,
        elem.codAccion + "-" + elem.desAccion,
        elem.desTipoOper,
        elem.desUnidpetPart,
        elem.codParticip + "-" + elem.desParticip,
        elem.porParticipFormat + "%",
        elem.varPor ? elem.varPor : "-",
        elem.saldoEurFormat
    ]);
    

    $scope.tabledata = tabledata;
    // json: JSON.parse(tabledata)


<table>
<tr ng-repeat='x in tabledata track by $index' ng-class='"headerRow":$index==0'>
<td ng-repeat='y in x'> y </td>
</tr></table>

现在您已经将数据保存在一个整洁的小数组中，您可以轻松地将其传输到 JSON 和一个角度友好的表格以进行引导。