Remove first duplicate from an array of objects in JavaScript

Question

On input change I create an array of objects. When any value enter within the input field, it pushes objects into array but the problem is when a text field is updated, it does again push items into array. I need to update the array instead of pushing more items.

    var tableData = [];
    $('.aantalNumber').change(function(){
       var aantalNumberVal = $(this).val()
       var Productnummer = $(this).closest('tr').find('.product_number').text();
       var Productnaam = $(this).closest('tr').find('.product_name').text();
       var verpakking =$(this).closest('tr').find('.verpakking').text();
       
       tableData.push({aantalNumber:aantalNumberVal,Productnummer:Productnummer,Productnaam:Productnaam,verpakking:verpakking });
      console.log(tableData);
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <tr>
      <td><input type="number" class="aantalNumber" name="Aantal1"></td>
      <td class="product_number">01454</td>
      <td class="product_name">Vendor Handdoeken ZZ vouw</td>
      <td class="verpakking">5000 velper verpakking</td>
    </tr>
    
     <tr>
      <td><input type="number" class="aantalNumber" name="Aantal2"></td>
      <td class="product_number">218031</td>
      <td class="product_name">Vendor Handdoeken ZZ vouw</td>
      <td class="verpakking">5000 velper verpakking</td>
    </tr>
    <!-- Repeated tr and so on -->

1. Figure out which of those array fields can uniquely identify an element. 2. Use [array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) to test if it exists and locate it if it does. 3. If it exists, update it, otherwise push a new element to the array as you are doing. — James, Aug 17 '20 at 12:20
check this - https://stackoverflow.com/questions/2333111/how-can-i-check-if-a-value-is-changed-on-blur-event — SSD, Aug 17 '20 at 12:23

score 1 · Accepted Answer · answered Aug 17 '20 at 12:29

First check if value exist, if available then update else push into tableData

 var tableData = [];
 $('.aantalNumber').change(function() {
   var aantalNumberVal = $(this).val()
   var Productnummer = $(this).closest('tr').find('.product_number').text();
   var Productnaam = $(this).closest('tr').find('.product_name').text();
   var verpakking = $(this).closest('tr').find('.verpakking').text();

   if (tableData.some(tableData => tableData.Productnummer === Productnummer)) {
     updateTableData(Productnummer, aantalNumberVal);
   } else {
     tableData.push({
       aantalNumber: aantalNumberVal,
       Productnummer: Productnummer,
       Productnaam: Productnaam,
       verpakking: verpakking
     });
   }


   console.log(tableData);
 });

 function updateTableData(value, aantalNumber) {
   for (var i in tableData) {
     if (tableData[i].Productnummer == value) {
       tableData[i].aantalNumber = aantalNumber;
       break; //Stop this loop, we found it!
     }
   }
 }

Working Demo

Remove first duplicate from an array of objects in JavaScript

1 Answers1