在javascript或jquery中比较两种不同的数组类型

我有两种不同的数组类型。 其中一个字符串数组是另一个对象数组;

stringArray = ["P1", "P2", "P3"]; objectArray = [{ P: "P1", PO: 5}, { P: "P3", PO: 10}]; 

我想将对象数组放到表中。 字符串数组元素必须是表头。

如果对象数组有P == "P1"则将5放入单元格。 否则将空单元格排成行。

我尝试了这个，但这放了多个空单元格。

这是我的代码“tKeys”= stringArray，“Ciktilar”= objectArray

 var baslikEklendiMi = false; var satirEkle = function(CalismaTipi, Ciktilar, tKeys) { var satir = '' + CalismaTipi + ''; $.each(tKeys, function (i, val) { if (baslikEklendiMi == false) { $("#tblBaslik").append("" + val+ ""); } $.each(Ciktilar, function (j, obj) { if (val == obj.P) { satir += '' + obj.PO+ ''; } else { satir += ''; } }); }); baslikEklendiMi = true; $("#tblListe").append('' + satir + ''); } 

Answer 1

得到类似的东西：

 |--|--|--|--| |ct|P1|P2|P3| |--|--|--|--| |??|5 | |10| |--|--|--|--| 

您的代码需要进行五项更改：

1）第7行（下面）：实例化emptyCell ，赋值为false ;

2）第9行：添加$("#tblBaslik").append("

ct

")以考虑CalismaTipi列，

3）第25-27行：将satir += '

'移到Ciktilar循环之外。

4）第22行：将true分配给emptyCell 。

5）18-19行：重置emptyCell并退出Ciktilar循环。

 var stringArray = ["P1", "P2", "P3"]; var objectArray = [{ P: "P1", PO: 5}, { P: "P3", PO: 10}]; var baslikEklendiMi = false; var satirEkle = function(CalismaTipi, Ciktilar, tKeys) { var emptyCell = false; // Line 7 var satir = '' + CalismaTipi + ''; $("#tblBaslik").append("ct"); // Line 9 $.each(tKeys, function (i, val) { if (baslikEklendiMi === false) { $("#tblBaslik").append("" + val+ ""); } $.each(Ciktilar, function (j, obj) { if (val == obj.P) { satir += '' + obj.PO+ ''; emptyCell = false; // Line 18 return false; } else { emptyCell = true; // Line 22 } }); if (emptyCell) { // Line 24 satir += ''; } }); baslikEklendiMi = true; $("#tblListe").append('' + satir + ''); }; satirEkle('??', objectArray, stringArray); 

你需要移动satir += '

'; 在Ciktilar循环之外是因为stringArray列表不直接对应于objectArray列表。 您想要检查所有stringArray元素以查找匹配项，如果在检查完所有stringArray元素后没有匹配，那么写一个空单元格。 因此，不是在循环中写入satir ，而是设置emptyCell标志，并在循环后检查该标志。

JSBin的例子。

Answer 2

您必须像这样更改您的代码：

 var satirEkle = function(CalismaTipi, Ciktilar, tKeys) { var satir = '' + CalismaTipi + ''; $.each(tKeys, function (i, val) { if (baslikEklendiMi == false) { $("#tblBaslik").append("" + val+ ""); } var emptyCell = false; $.each(Ciktilar, function (j, obj) { if (val == obj.P) { satir += '' + obj.PO+ ''; } else { emptyCell = true; } }); if (emptyCell) { satir += '-'; } }); baslikEklendiMi = true; $("#tblListe").append('' + satir + ''); } 

您应该在空单元格中添加一个字符以使其具有更友好的布局。

一个很好的选择是空的html空间  。

希望这可以帮助。

Answer 3

我想使用一种工具，我经常使用它从一个对象或对象数组生成表HTML。 所以下面的代码将为您生成一个表。 通用tableMaker函数接受第一个参数中提供的对象数组或多个对象数组。 所有对象都应具有相同的键（属性），因为这些键用于创建表头（如果第二个参数设置为true），并且这些值用于创建每一行。 它将返回HTML表格文本。 您可以在此处看到tableMaker函数使用较小的数据。 您也可以使用您可能生成的一些样本和简单数据来练习它。

 var tableMaker = (o,h) => {var keys = o.length && Object.keys(o[0]), rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "" : "<" + t + ">" + c + ""),""), rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); return rows.length ? "" + rows + "" : ""; }, stringArray = ["P1", "P2", "P3"], objectArray = [{ P: "P1", PO: 5}, { P: "P3", PO: 10}], tableObject = stringArray.reduce((p,c) => {var fo = objectArray.find(f => fP == c); p[c] = fo ? fo.PO : ""; return p;} ,{}), tableHTML = tableMaker([tableObject],true); document.write(tableHTML); console.log(tableHTML);