配列のサブセットと元の配列の比較

Question

私は2つの配列を持ち、それらの間に共通のフィールドが名前であるオブジェクトを含んでいます。私はこれらの配列からのデータを単純なテーブルに出力したいと思います。ただし、一方の配列が他方の配列のサブセットであるため、テーブルを塗りつぶすときにデータが正しい場所にない。これらのギャップを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

私はあなたが名前が付いているテーブルがほしいと理解できました。 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++) { 
 
\t 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++) { 
 
\t 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>