MMM Bacon
MMM Bacon

Reputation: 71

Comparing multiple objects in two arrays

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!

Upvotes: 0

Views: 173

Answers (2)

Ciro Costa
Ciro Costa

Reputation: 2585

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)

Upvotes: 0

user3998237
user3998237

Reputation:

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.

Upvotes: 1

Related Questions