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

Question

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

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

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

如果对象数组有P == "P1"将5放到单元格中。否则将空单元格放在行中。

我试过这个，但是这把多个空单元格。

这是我的代码 “tKeys”=字符串数组， “Ciktilar”= objectArray

var baslikEklendiMi = false; 
var satirEkle = function(CalismaTipi, Ciktilar, tKeys) 
{ 
    var satir = '<td>' + CalismaTipi + '</td>'; 
    $.each(tKeys, function (i, val) { 
     if (baslikEklendiMi == false) { 
      $("#tblBaslik").append("<th>" + val+ "</th>"); 
     } 

     $.each(Ciktilar, function (j, obj) { 
      if (val == obj.P) { 
       satir += '<td><b>' + obj.PO+ '</b></td>'; 
      } 
      else { 
       satir += '<td></td>'; 
      } 
     }); 
    }); 

    baslikEklendiMi = true; 
    $("#tblListe").append('<tr>' + satir + '</tr>'); 
} 

Answer 1

要得到的东西，如：

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

有需要你的代码进行五个转变：

1）7号线（下图）：实例emptyCell，分配false;

2）第9行：添加$("#tblBaslik").append("<th>ct</th>")占CalismaTipi柱，

3）25-27行：移动satir += '<td></td>'到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 = '<td>' + CalismaTipi + '</td>'; 
    $("#tblBaslik").append("<th>ct</th>");    // Line 9 
    $.each(tKeys, function (i, val) { 
     if (baslikEklendiMi === false) { 
      $("#tblBaslik").append("<th>" + val+ "</th>"); 
     } 

     $.each(Ciktilar, function (j, obj) { 
      if (val == obj.P) { 
       satir += '<td><b>' + obj.PO+ '</b></td>'; 
       emptyCell = false;       // Line 18 
       return false; 
      } 
      else { 
       emptyCell = true;       // Line 22 
      } 
     }); 
     if (emptyCell) {         // Line 24 
      satir += '<td></td>'; 
     } 
    }); 

    baslikEklendiMi = true; 
    $("#tblListe").append('<tr>' + satir + '</tr>'); 
}; 
satirEkle('??', objectArray, stringArray); 

你需要移动satir += '<td></td>';的Ciktilar环外的原因是因为stringArray列表不会直接对应于objectArray列表。您要检查所有stringArray元素以查找匹配项，如果检查完所有stringArray元素后没有匹配，则写入一个空单元格。因此，不要在循环中写入satir，而是设置一个emptyCell标志，并在循环后检查该标志。

JSBin example.

Answer 2

你必须改变你的代码是这样的：

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

     if (emptyCell) { 
      satir += '<td>-</td>'; 
     } 
    }); 

    baslikEklendiMi = true; 
    $("#tblListe").append('<tr>' + satir + '</tr>'); 
} 

您应该添加里面空空的一个char细胞有一个更友好的布局。

一个不错的选择是空的html空间 。

希望这会有所帮助。

Answer 3

我想用工具，我使用经常产生从对象或对象的数组表HTML做。所以下面的代码会为你生成一个表格。通用tableMaker函数接受第一个参数中提供的一个对象数组或一个由多个对象组成的数组。所有对象都应具有相同的键（属性），因为这些键用于创建表头（如果第二个参数设置为true）并且这些值用于创建每一行。它将返回一个HTML表格文本。您可以在here处看到使用较小尺寸数据的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 + "></tr>" 
 
                          : "<" + t + ">" + c + "</" + t + ">"),"<tr>"), 
 
          rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); 
 
          return rows.length ? "<table>" + rows + "</table>" : ""; 
 
          }, 
 
    stringArray = ["P1", "P2", "P3"], 
 
    objectArray = [{ P: "P1", PO: 5}, { P: "P3", PO: 10}], 
 
    tableObject = stringArray.reduce((p,c) => {var fo = objectArray.find(f => f.P == c); 
 
               p[c] = fo ? fo.PO : ""; 
 
               return p;} ,{}), 
 
    tableHTML = tableMaker([tableObject],true); 
 
document.write(tableHTML); 
 
console.log(tableHTML);