두 배열의 여러 객체 비교

두 개의 다른 배열로 현재 밀어 넣는 두 세트의 객체가 있고 객체 수에 대해 두 세트의 배열을 비교하려고하며 키 값 쌍의 값이 올바른지 확인하려고합니다. .두 배열의 여러 객체 비교

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]*" 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>

나는 성공적으로 두 배열의 길이를 비교할 수 있습니다,하지만 난 (내 배열의 변수 이름입니다) 직선 평등과 같은 orderChart == userInput를 사용하여 시도했지만 나는 결과를 점점 계속 거짓의. 어떤 도움을 주셔서 감사합니다. 감사!

출처

2015-02-01 MMM Bacon

이것은 객체/사이트가 큰 것이 아니라면 도움이 될 수 있습니다 http://stackoverflow.com/questions/1068834/object- comparison-in-javascript – MrPickles

가능한 복제본 : http://stackoverflow.com/questions/1773069/using-jquery-to-compare-two-arrays-of-javascript-objects – hindmost

수행하려는 작업은 심층 확인입니다. '=='또는 '==='를 사용하여 '순진하게'두 객체를 비교하려고하면 항상 JS의 객체가 참조로 전달되므로 false를 반환합니다.

이 실제로 꽤 흥미로운 질문 자체가있는 그대로 :

어쨌든

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

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

... 객체는 객체의 각 필드의 값이 있는지 조사 할 수 있습니다 다른 동일한 경우 확인하기위한 다른 것들과 같습니다. 발생하는 질문은 중첩 된 객체는 무엇입니까? 그 중 하나 (즉 재귀 사용)를 확인해야합니다.

그래서, 하나 개의 가능한 솔루션입니다 :

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

기본 : 우리는 '==='와 동일한 지 어떤지를 확인 이외의 목적으로 다루고있다.

재귀 : 아직 객체가 아닌 경우 키가 동일한 지 확인합니다 (그렇지 않은 경우 객체가 동일하지 않음). 일치하는 경우 각 키에 대해 반복적으로 검사를 수행합니다.

편집 : 두 lodash 언급하고 밑줄로 동등한 :: ISEQUAL 방법을 (내가 lodash로 갈 것)

추신 :이 테스트 된 해결책이 아니다 있습니다. 할 일을 설명하는 것입니다 (lodash 또는 다른 생산 준비가 된 솔루션을 가지고 가야합니다)

출처

2015-02-01 15:56:57

좋은 해결책 @Ciro –

설명 주셔서 감사합니다! 나는 확실히 로다시를 들여다 볼게. –

개체를 비교하려고하면 결과가 항상 false가됩니다. 두 사람이 같은 특성을 가지고하더라도, 인터프리터는 항상

obj1 === obj2 = false.

당신은 두 개체의 키/값을 비교하는 기능을 만들 필요

하지만, 경우에 돈 ... 그들은 두 가지 목적이 있음을 고려, 너무합니다 시간 낭비를 원하지 않으면 항상 loadash #isEqual을 사용할 수 있습니다.

출처

2015-02-01 15:35:55

맞습니다. 내가 뭘했는지. 감사! –

loadash @ user2150074를 사용해 보셨습니까? –

나는 해냈다. 두 가지 배열에 대한 기본 비교를 수행 할 수 있는데, 이는 _.isEqual()을 수행하여 매우 좋습니다. 나는 arrayOne = [{obj1}, {obj2}, {obj3}]와 arrayTwo = [{obj3}, {obj1}, obj2}와 같이 객체가 두 배열에서 다르게 배열되어 있으면 비교를 수행하려고합니다. {obj2}]. 분명히 사실 일 때 나는 이것을 던져서 작업하고 있습니다. 나는 어떤 제안이든 열려 있습니다. 감사! –

두 배열의 여러 객체 비교

답변

관련 문제