Comparing multiple objects in two arrays

Question

I have two sets of objects that I am currently pushing to two different arrays and I'm trying to compare both sets of arrays for number of objects and that the value from the key value pairs are correct.

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <!-- order to build too -->
  <table id="bubbleTable" class="heavyTable">
    <thead>
      <tr>
        <th width="12%">Amount</th>
        <th width="43%">Vehicle</th>
        <th width="20%">Wheels</th>
        <th width="25%">Pattern</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center" valign="middle" class="row">
        <td class="amount">1</td>
        <td class="vehicle">
          <img src="../images/car1192015.png" class="carChartVersion">
        </td>
        <td class="wheel">
          <img src="../images/wheelsthmb1.png" class="chartVersion">
        </td>
        <td class="pattern">
          <img src="../images/checkerboard1192015.png" class="patternChartVersion">
        </td>
      </tr>
      <tr align="center" valign="middle" class="row">
        <td class="amount">2</td>
        <td class="vehicle">
          <img src="../images/truck1192015.png" class="carChartVersion">
        </td>
        <td class="wheel">
          <img src="../images/wheelsthmb2.png" class="chartVersion">
        </td>
        <td class="pattern">
          <img src="../images/squiggle1192015.png" class="patternChartVersion">
        </td>
      </tr>
      <tr align="center" valign="middle" class="row">
        <td class="amount">3</td>
        <td class="vehicle">
          <img src="../images/van1192015.png" class="carChartVersion">
        </td>
        <td class="wheel">
          <img src="../images/wheelsthmb3.png" class="chartVersion">
        </td>
        <td class="pattern">
          <img src="../images/fire1192015.png" class="patternChartVersion">
        </td>
      </tr>
    </tbody>
  </table>


  <!-- user Input container -->
  <div id="currentOrder" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 79px; max-height: none; height: auto;">
    <div class="vehiclesInBox" id="product6">
      <div class="fltLeft positionRelative name6">
        <img class="vehicle vehicleInShipment" src="../images/car1192015.png">
        <img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
        <img src="../images/wheelsthmb1.png" class="hidden">
        <img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
      </div>
      <div class="fltRight removeX">–</div>
      <div class="clear">
      </div>
    </div>
    <div class="vehiclesInBox" id="product7">
      <div class="fltLeft positionRelative name7">
        <img class="vehicle vehicleInShipment" src="../images/truck1192015.png">
        <img class="wheelThmbs wheelsInShipment" src="../images/wheels2.png">
        <img src="../images/wheelsthmb2.png" class="hidden">
        <img class="pattern patternInShipment" src="../images/squiggle1192015.png">
      </div>
      <div class="fltRight removeX">–</div>
      <div class="clear"></div>
    </div>
    <div class="vehiclesInBox" id="product8">
      <div class="fltLeft positionRelative name8">
        <img class="vehicle vehicleInShipment" src="../images/van1192015.png">
        <img class="wheelThmbs wheelsInShipment" src="../images/wheels3.png">
        <img class="pattern patternInShipment" src="../images/fire1192015.png">
      </div>
      <div class="fltRight removeX">–</div>
      <div class="clear"></div>
    </div>
  </div>



  <script>
    $(document).ready(function() {

      //Image variables
      var vehicleList = ['../images/car1192015.png', '../images/truck1192015.png', '../images/van1192015.png'];

      //set different wheel shapes thumbnails
      var wheelThmbs = ['../images/wheelsthmb1.png', '../images/wheelsthmb2.png', '../images/wheelsthmb3.png', '../images/wheelsthmb4.png'];

      //images with two wheels
      var wheels = ['../images/wheels1.png', '../images/wheels2.png', '../images/wheels3.png', '../images/wheels4.png']


      //put within the ship order button
      var orderChart = [];
      var userInput = [];


      $("tr.row").each(function() {
        var vehicle = $(this).find(".vehicle img").attr("src");
        var wheel = $(this).find(".wheel img").attr("src");
        var pattern = $(this).find(".pattern img").attr("src");
        var amount = $(this).find(".amount").html();

        //check for amount add another object

        var vehicleToComplete = {
          vehicle: vehicle,
          wheel: wheel,
          pattern: pattern
        }

        orderChart.push(vehicleToComplete);
      });


      $(".vehiclesInBox").each(function() {
        var vehicle = $(this).find(".fltLeft .vehicle").attr("src");
        var pattern = $(this).find(".fltLeft .pattern").attr("src");
        var findWheel = $(this).find(".fltLeft .wheelThmbs").attr("src");

        //swapSingleWheel = findWheel;
        if (findWheel === wheels[0]) {
          findWheel = wheelThmbs[0];
        } else if (findWheel === wheels[1]) {
          findWheel = wheelThmbs[1];
        } else if (findWheel === wheels[2]) {
          findWheel = wheelThmbs[2];
        }


        var userCompleteVehicle = {
          vehicle: vehicle,
          wheel: findWheel,
          pattern: pattern
        }

        userInput.push(userCompleteVehicle);

      });

      if (orderChart.length != userInput.length) {
        //console.log()
        alert("the amount of vehicles in shipped order is incorrect")

      }

    });
  </script>

</body>

</html>

I can successfully compare the lengths of both arrays, but I've tried using straight equality such as orderChart == userInput (which are the variable names of my arrays) but I keep getting a result of false. Any help is appreciated. Thanks!

this may help if the object/site are not to big http://stackoverflow.com/questions/1068834/object-comparison-in-javascript — MrPickles, Feb 01 '15 at 15:40
Possible duplicate: http://stackoverflow.com/questions/1773069/using-jquery-to-compare-two-arrays-of-javascript-objects — hindmost, Feb 01 '15 at 15:45

score 1 · Answer 1 · 2015-02-01T15:54:45.437

1

If you try to compare objects, the result will be ALWAYS false. Even if the two have the same properties, the interpreter will always consider that they are two distinct objects, so..

obj1 === obj2 = false.

You need create a function to compare the keys/values of both objects, but if you don't want waste your time, you can always use loadash #isEqual.

edited Feb 01 '15 at 15:54

answered Feb 01 '15 at 15:35

Right, i kept running into a false result no matter what i tried. Thanks! – MMM Bacon Feb 03 '15 at 00:48
did you try use loadash @user2150074? – Feb 03 '15 at 00:58
I did. I'm able to do a basic compare on both arrays which is awesome by doing an _.isEqual(). I'm now trying to get the comparison to work if the objects are arranged differently in both arrays, for example arrayOne = [{obj1}, {obj2}, {obj3}] and arrayTwo = [{obj3}, {obj1}, {obj2}]. This is throwing a false when obviously it should be true so I'm working through it. I'm open to any suggestions. Thanks! – MMM Bacon Feb 03 '15 at 21:30

Ciro Costa · Accepted Answer · 2015-02-01T16:13:00.797

What you're trying to perform is deep equality check. If you try to 'naively' comparare two objects only using '==' or '===', it will always return false (as objects in JS are passed by reference).

This is actually a pretty interesting question per se as:

var a = b = {}; 
a === b;  // true
a == b;   // true

var c = {}; var d = {};
c === d; // false
c == d; //false

Anyway ... for checking if an object is equal to another you might want to investigate if the value of each field in the object is equal to the other ones. A question that arises is: what about nested objects? You have to check that either (i.e, use of recursion).

So, one possible solution is:

function equalTo (a, b) {
  if (!(typeof a === 'object') && typeof b === 'object')) 
      || (a === b))
    return true;

  var keysA, keysB, equalKeys;

  keysA = Object.keys(a);
  keysB = Object.keys(b);

  equalKeys = kA.some(function (item, i) {
    return item === kB[i];
  });

  if (!equalKeys)
    return false;

  for (var key in keysA)
    return equalTo(a[keysA[key]], b[keysA[key]]);

  return false;
}

base: we are dealing with non-objects, check for equality with '==='.

recursive: not yet in non-objects, verify if the keys are equal (if not, the objects won't be equal). If they are, for each key, recursively do the check.

edit: as mentioned, both lodash and underscore have an equivalent ::isEqual method (i'd go with lodash)

ps.: this is NOT A TESTED SOLUTION. It is just to illustrate a way of doing (you should go with lodash or other production ready solution)

Thanks for the explanation! I'll definitely look into lodash — MMM Bacon, Feb 03 '15 at 00:48

Comparing multiple objects in two arrays

2 Answers2