Comparing the subset of an array against original array

Question

I have two arrays, both containing objects, where the common field between them is the name. I want to output the data from these arrays to a simple table. However, as one array is the subset of the other, when filling the table the data isn't in the right place. I would like to fill these gaps with 0 . For example:

// 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 }
]

At the moment, the output table looks like this:

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

But I would like it to look like this:

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

The code I'm using for this is:

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

This is just an example and my current code follows the same lines, however, the initial data is being pulled straight from a database and inserted into a JSON array. Any help with this would be much appreciated. Thanks

Answer 1

What you can do, instead of just looping through array1 , is first check to see if that same name is also in array2 . If it is, you can use that array2 value, but if its not, you should use 0.

The following code will get you there:

 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>

Admittedly, there are probably more advanced/efficient methods of accomplishing this, though I believe my example favors readability.

Answer 2

As i could understand you want a table with NAME |arr2 | arr1 giving priority to arr1, so try this:

 // 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

You can use the following:

// 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

Not the most efficient way to do this but still wanted to point out that it can be done this way too.

 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>