Remove duplicate values from an object array after using an .each() function

Question

I have an each function that takes the td elements of an html table and places them in an object array. My problem is that I only need the unique values from the table. This is causing my array to have duplicate values. ideally I would like to see unique values for Product and valProduct. valProduct is essentially the same as "Product`. Here is my closes attempt:

var array_return = [];

$(".table__product td:nth-child(1)").each(function() {
  array_return.push({
    "Product": $(this).html(),
    "valProduct": $(this).html()
  });
});


array_return.sort(function(a, b) {
  return a.Product - b.Product;
});

// delete all duplicates from the array_return
for (var i = 0; i < array_return.length - 1; i++) {
  if (array_return[i].Product == array_return[i + 1].Product) {
    delete array_return[i];
  }
}

// remove the "undefined entries"
array_return = array_return.filter(function(el) {
  return (typeof el !== "undefined");
});

alert(JSON.stringify(array_return));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>


<table class="table__product">
  <tr>
    <td>Apple</td>
    <td>3384</td>
    <td>iPhone</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>8800</td>
    <td>Galaxy</td>
  </tr>
  <tr>
    <td>LG</td>
    <td>8684</td>
    <td>V20</td>
  </tr>
  <tr>
    <td>Google</td>
    <td>8179</td>
    <td>Pixel</td>
  </tr>
  <tr>
    <td>Blackberry</td>
    <td>4554</td>
    <td>Storm</td>
  </tr>
  <tr>
    <td>Motorolla</td>
    <td>6764</td>
    <td>Z force</td>
  </tr>
  <tr>
    <td>LEASING_REVENUE</td>
    <td NOWRAP align=RIGHT>-2100000</td>
  </tr>
  <tr>
    <td>LEASING_REVENUE</td>
    <td NOWRAP align=RIGHT>-2095011</td>
  </tr>
  <tr>
    <td>LEASING_REVENUE</td>
    <td NOWRAP align=RIGHT>-2095010</td>
  </tr>
  <tr>
    <td>ECS/ACH</td>
    <td align=RIGHT>4493</td>
  </tr>
  <tr>
    <td>ECS/ACH</td>
    <td align=RIGHT>4494</td>
  </tr>
  <tr>
    <td>ECS/ACH</td>
    <td align=RIGHT>4495</td>
  </tr>
</table>

@ElliottFrisch I removed the tag it was clearly out of place — user2314737, Jan 18 '17 at 17:53
The above code is not properly removing duplicates from the array. If you put this code in jsfiddle you will see. — dmoses, Jan 18 '17 at 18:05
Possible duplicate of [Remove Duplicates from JavaScript Array](http://stackoverflow.com/questions/9229645/remove-duplicates-from-javascript-array) — Heretic Monkey, Jan 18 '17 at 18:10

score 0 · Answer 1 · answered Jan 18 '17 at 18:07

I think you may be better off copying the unique items to a new array rather than using the loop you are using. The problem with this part of the code:

for (var i = 0; i < array_return.length - 1; i++) {
  if (array_return[i].Product == array_return[i + 1].Product) {
    delete array_return[i];
  }
}

is that: 1) when you delete an item from the array (say item at index 3). The item at index 4 becomes item 3 but then when you increment i in the loop, it will be checking index 4 (which used to be index 5) and index 4 never gets checked. I'd rewrite that to something like:

var newArray = [];   
newArray.push(array_return[0]); 
for (var i = 1; i < array_return.length; i++) {
      if (array_return[i].Product != array_return[i - 1].Product) {
        newArray.push(array_return[i]);
      }
    }
array_return = newArray;

I don't guarantee the syntax is perfect but this is definitely the idea.

Tha'er AlAjlouni ثائر العجلوني · Accepted Answer · 2017-01-18T18:11:43.550

The error is caused because of two things:

The value of the sorted array is not assigned back to anywhere
You are modifying the array by deleting keys in the for loop

What you need to do is define a new array in the for loop instead of modifying the original one, and then assign the new one to the original.

See the following code for an example:

var array_return = [];
var filtered_array = [];
var filtered_array_keys = [];

$(".table__product td:nth-child(1)").each(function() {
  array_return.push({
    "Product": $(this).html(),
    "valProduct": $(this).html()
  });
});

// delete all duplicates from the array_return
for (var i = 0; i < array_return.length - 1; i++) {
  if (filtered_array_keys.indexOf(array_return[i].Product) < 0) {
    filtered_array_keys.push(array_return[i].Product);
    filtered_array.push(array_return[i]);
  }
}
array_return = filtered_array;

// remove the "undefined entries"
array_return = array_return.filter(function(el) {
  return (typeof el !== "undefined");
});

alert(JSON.stringify(array_return));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<table class="table__product">
  <tr>
    <td>Apple</td>
    <td>3384</td>
    <td>iPhone</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>8800</td>
    <td>Galaxy</td>
  </tr>
  <tr>
    <td>LG</td>
    <td>8684</td>
    <td>V20</td>
  </tr>
  <tr>
    <td>Google</td>
    <td>8179</td>
    <td>Pixel</td>
  </tr>
  <tr>
    <td>Blackberry</td>
    <td>4554</td>
    <td>Storm</td>
  </tr>
  <tr>
    <td>Motorolla</td>
    <td>6764</td>
    <td>Z force</td>
  </tr>
  <tr>
    <td>LEASING_REVENUE</td>
    <td NOWRAP align=RIGHT>-2100000</td>
  </tr>
  <tr>
    <td>LEASING_REVENUE</td>
    <td NOWRAP align=RIGHT>-2095011</td>
  </tr>
  <tr>
    <td>LEASING_REVENUE</td>
    <td NOWRAP align=RIGHT>-2095010</td>
  </tr>
  <tr>
    <td>ECS/ACH</td>
    <td align=RIGHT>4493</td>
  </tr>
  <tr>
    <td>ECS/ACH</td>
    <td align=RIGHT>4494</td>
  </tr>
  <tr>
    <td>ECS/ACH</td>
    <td align=RIGHT>4495</td>
  </tr>
</table>

@MikeMcCaughan Sorry the answer was posted by mistake will composing, I updated the answer. — Tha'er AlAjlouni ثائر العجلوني, Jan 18 '17 at 18:12

score 0 · Answer 3 · answered Jan 18 '17 at 18:16

var array_return = [];

$(".table__product td:nth-child(1)").each(function() {
  var value = $(this).html();

  // check if a product with value is already exist
  var exist = array_return.find(function(e){
      return e.Product == value;
  });
  // if exist, don't save
  if(exist) return;

  // else push it
  array_return.push({
    "Product": value,
    "valProduct": value
  });
});

// no need for more filtering.

Remove duplicate values from an object array after using an .each() function

3 Answers3