javascript - 将数组的子集与原始数组进行比较

Question

我有两个数组，都包含对象，它们之间的公共(public)字段是名称。我想将这些数组中的数据输出到一个简单的表中。但是，由于一个数组是另一个数组的子集，因此在填充表时数据不在正确的位置。我想用 0 来填补这些空白。例如:

// Array 1:
[
  { Name: A, Value: 7 }, 
  { Name: B, Value: 13 }, 
  { Name: C, Value: 36 }, 
  { Name: D, Value: 43 }
]

// Array 2:
[
  { Name: A, Value: 3 }, 
  { Name: C, Value: 21 }, 
  { Name: D, Value: 15 }
]

目前，输出表如下所示:

A | 3  | 7
B | 21 | 13
C | 15 | 36
D |    | 43

但我希望它看起来像这样:

A | 3  | 7
B | 0  | 13
C | 21 | 36
D | 15 | 43

我为此使用的代码是:

for(var j = 0; j < array1.length; j++) {
  var row = "<tr><td>Name : " + array1[j]["Name"] + "</td>" +
    "<td>Name : " + array2[j]["Value"] + "</td>" +
    "<td>Name : " + array1[j]["Value"] + "</td></tr>";
  $("#TABLE").append(row);
}

这只是一个示例，我当前的代码遵循相同的行，但是，初始数据是直接从数据库中提取并插入到 JSON 数组中。任何对此的帮助将不胜感激。谢谢

Answer 1

您可以做的不是仅仅循环遍历array1，而是首先检查array2 中是否也存在相同的名称。如果是，您可以使用该 array2 值，但如果不是，您应该使用 0。

以下代码将帮助您实现目标:

var array1 = [{ Name: "A", Value: 7 }, { Name: "B", Value: 13 }, { Name: "C", Value: 36 }, { Name: "D", Value: 43 }]
var array2 = [{ Name: "A", Value: 3 }, { Name: "C", Value: 21 }, { Name: "D", Value: 15 }]

for(var j = 0; j < array1.length; j++) {

  var arrayName = array1[j]["Name"];
  var array1value = array1[j]["Value"];
  var array2value = 0;
  
  for (var i = 0; i < array2.length; i++) {
     if (array2[i]["Name"] == arrayName) {
         array2value = array2[i]["Value"];
         break;
     }
  }

  var row = "<tr><td>" + arrayName + "</td>" +
    "<td>" + array1value + "</td>" +
    "<td>" + array2value + "</td></tr>";
  $("#TABLE").append(row);
}

table tr td, table tr th{
    padding: 10px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TABLE">
<thead>
    <tr>
        <th>Name</th>
        <th>Array1 Val</th>
        <th>Array2 Val</th>
    </tr>
</thead>
</table>

诚然，可能有更先进/有效的方法来实现这一点，但我相信我的示例有利于可读性。