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

Question

我用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;

Answer 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和一个角度友好的表中进行引导。