0

How to validate if selected records data is mismatching in two tables. I need to select few records in each table. Once click on Match button, if currency is not same. we need to show one alert like "Data mismatched". I tried with below code but comparing the objects getting some issue. Could you please suggest me the issue...

Eg: First table I selected checkbox and currency as "USD" and second table checkbox currency as "EUR". So USD !=EUR, here I need to display one alert. Same operation can perform Many to Many scernario as well.

Like [{USD, INR, EUR}] = [{USD, EUR, USD}] >> false

     [{USD, USD, USD}] = [{USD, USD, USD}] >> true

     [{IND}] = [{IND}] >> true


$(document).ready(function () {
    $("#idMatch").click(function () {
        var jsonData1 = [];
        var jsonData2 = [];
        var $headers = $("#firstTable").find("th:not(:first)");
        var $rows = $("#firstTable").find("tbody tr input[type=checkbox]:checked").each(function (index) {
            const $cells = $(this).closest("tr").find("td:not(:first)");
            jsonData1[index] = {};
            $cells.each(function (cellIndex) {
                jsonData1[index][$($headers[cellIndex]).text()] = $(this).text();
            });
        });
        var $headers = $("#secondTable").find("th:not(:first)");
        var $rows = $("#secondTable").find("tbody tr input[type=checkbox]:checked").each(function (index) {
            const $cells = $(this).closest("tr").find("td:not(:first)");
            jsonData2[index] = {};
            $cells.each(function (cellIndex) {
                jsonData2[index][$($headers[cellIndex]).text()] = $(this).text();
            });
        });
        const obj1Keys = Object.keys(jsonData1);
        const obj1Values = Object.values(jsonData1);
        const obj2Keys = Object.keys(jsonData2);
        const obj2Values = Object.values(jsonData2);
        for (let i = 0; i < obj1Keys.length; i++) {
            for (let j = 0; j < obj2Keys.length; j++) {
                if (obj1Keys[i] === obj2Keys[j]) {
                    if (obj1Values[2] !== obj2Values[2]) {
                        alert("data mismatched");
                    }
                }
            }
        }
    });
});
 <button id="idMatch">Match</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
  <div>Count::<span id="idCheckBoxLabel"></span>
    <div>
      <div>
        <table datatable id="firstTable" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>Amount</th>
              <th>Currency</th>
              <th>Nation</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>100</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>200</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>300</td>
              <td>IND</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>400</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>500</td>
              <td>EUR</td>
              <td>xyz</td>
            </tr>
          </tbody>
        </table>
        <table datatable id="secondTable" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>Amount</th>
              <th>Currency</th>
              <th>Nation</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>111</td>
              <td>EUR</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>222</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>322</td>
              <td>DNR</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>422</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>565</td>
              <td>EUR</td>
              <td>xyz</td>
            </tr>          
          </tbody>
        </table>
      </div>
    </div>
Rajasekhar
  • 2,215
  • 3
  • 23
  • 38
  • Does this answer your question? [Generic deep diff between two objects](https://stackoverflow.com/questions/8572826/generic-deep-diff-between-two-objects) – Heretic Monkey Jan 05 '21 at 13:05
  • If all the USD and one EUR are ticked in the first table, and only one USD and EUR are ticked in the second table- what is the expected result? – Robin Mackenzie Jan 05 '21 at 13:44

1 Answers1

1

You can simply loop through both json datas using for-loop and then compare jsonData1[i]['Currency'] !== jsonData2[j]['Currency'] where Currency is your amount column so if not same it will show you error message.

Demo Code :

$(document).ready(function() {
  $("#idMatch").click(function() {
    var jsonData1 = [];
    var jsonData2 = [];
    var $headers = $("#firstTable").find("th:not(:first)");
    var $rows = $("#firstTable").find("tbody tr input[type=checkbox]:checked").each(function(index) {
      const $cells = $(this).closest("tr").find("td:not(:first)");
      jsonData1[index] = {};
      $cells.each(function(cellIndex) {
        jsonData1[index][$($headers[cellIndex]).text()] = $(this).text();
      });
    });
    var $headers = $("#secondTable").find("th:not(:first)");
    var $rows = $("#secondTable").find("tbody tr input[type=checkbox]:checked").each(function(index) {
      const $cells = $(this).closest("tr").find("td:not(:first)");
      jsonData2[index] = {};
      $cells.each(function(cellIndex) {
        jsonData2[index][$($headers[cellIndex]).text()] = $(this).text();
      });
    });
    console.clear()
    //loop through json arrays
    for (let i = 0; i < jsonData1.length; i++) {
      for (let j = 0; j < jsonData2.length; j++) {
        console.log(jsonData1[i]['Currency'] + "--" + jsonData2[j]['Currency'])
        //check currency keys..
        if (jsonData1[i]['Currency'] !== jsonData2[j]['Currency']) {
          console.log("data mismatched");
        }
      }
    }
  });
});
<button id="idMatch">Match</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
  <div>Count::<span id="idCheckBoxLabel"></span>
    <div>
      <div>
        <table datatable id="firstTable" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>Amount</th>
              <th>Currency</th>
              <th>Nation</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>100</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>200</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>300</td>
              <td>IND</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>400</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>500</td>
              <td>EUR</td>
              <td>xyz</td>
            </tr>
          </tbody>
        </table>
        <table datatable id="secondTable" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>Amount</th>
              <th>Currency</th>
              <th>Nation</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>111</td>
              <td>EUR</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>222</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>322</td>
              <td>DNR</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>422</td>
              <td>USD</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>565</td>
              <td>EUR</td>
              <td>xyz</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
Swati
  • 28,069
  • 4
  • 21
  • 41