在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);