Сравнение подмножества массива с исходным массивом

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++) { 
 
\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>