Question

我有两个数组，都包含对象，它们之间的公共字段是名称。我想将这些数组中的数据输出到一个简单的表中。但是，由于一个数组是另一个数组的子集，因此在填充表时数据不在正确的位置。我想用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>

不可否认，可能有更先进/更有效的方法来实现这一点，但我相信我的例子更倾向于可读性。

Answer 2

据我所知，你想要一张带有NAME的桌子arr2 | arr1优先考虑arr1，所以试试这个：

// Array 1:
var arr1 = [{Name: "A",Value: 7}, {Name: "B",Value: 13}, {Name: "C",Value: 36}, {Name: "D",Value: 43}];

// Array 2:
var arr2 = [{Name: "A",Value: 3}, {Name: "C",Value: 21}, {Name: "D",Value: 15}];

var result = arr1.map(function(el1) {
  return "<tr><td>"+ el1.Name +" |</td><td>" + (arr2.filter(function(el2) {
    return el1.Name == el2.Name;
  }).map(function(el2){
    return el2.Value;
  })[0] || 0) + " |</td><td>" + el1.Value + "</td></tr>";
}).join("");

$('#result').html(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="result">
</table>

Answer 3

var rows = $("<tr><td>0</td><td>0</td></tr>".repeat(4));

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 i = 0 ; i < array1.length; i++) {
	var idx = array1[i].Name.charCodeAt(0) - "A".charCodeAt(0);
  $(rows[idx]).children(":eq(0)").text(array1[i].Value)
}

for (var i = 0 ; i < array2.length; i++) {
	var idx = array2[i].Name.charCodeAt(0) - "A".charCodeAt(0);
  $(rows[idx]).children(":eq(1)").text(array2[i].Value)
}

$("table").append(rows)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table></table>

Answer 4

您可以使用以下内容：

// for each item in the first array...
array1.forEach(function(item) {
    // try to find a match in the second array
    var item2 = array2.find(function(i) { return i.Name === item.Name; });

    // build out the row HTML, defaulting a value of 0 when match is not found
    var row = "<tr><td>Name : " + item.Name + "</td>" +
    "<td>Name : " + (item2 ? item2.Value : 0) + "</td>" +
    "<td>Name : " + item.Value + "</td></tr>";

    // append row to table
    $("#TABLE").append(row);
});

Answer 5

这不是最有效的方法，但仍然想指出它也可以这样做。

var a=[
  { Name: "A", Value: 7 }, 
  { Name: "B", Value: 13 }, 
  { Name: "C", Value: 36 }, 
  { Name: "D", Value: 43 }
];

var b=[
  { Name: "A", Value: 3 }, 
  { Name: "C", Value: 21 }, 
  { Name: "D", Value: 15 }
];
var temp=a.concat(b);
var output = [];
for(var i=0;i<temp.length;i++){
  var existingNameObj = output.filter(function(v){
   return temp[i]["Name"] == v["Name"];
   });
  if(existingNameObj.length){
    var existingObjIndex = output.indexOf(existingNameObj[0]);
    output[existingObjIndex]["ValueArray"].push(temp[i]["Value"]);
  }else{
    output.push({
      "Name":temp[i]["Name"],
      "ValueArray":[temp[i]["Value"]]
    });
  }
}
for(var j = 0; j < output.length; j++) {
  var row = "<tr><td>Name : " + output[j]["Name"] + "</td>" +
    "<td>" + output[j]["ValueArray"][0] + "</td>" +
    "<td>" + (output[j]["ValueArray"][1]|0) + "</td></tr>";
  $("#TABLE").append(row);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TABLE"></table>

将数组的子集与原始数组

5 个答案: