Remove all duplicate object elements from array-CodePudding

This one's been giving me problems for a week, cross my fingers one of you can help me here...

This application was built on Laravel and the front scaffolded using Vue.

Thing is I have an array of objects that is supposed to be sent to the backend in order for it to be stored in a database. Thing is this is an editor and the idea is not reload the page every time something is changed, so here comes my problem...

The way of getting the information is through window.postMessage(), so it seems the information lingers on even after saving, since the page behavior is for it to not reload, I have tried emptying the array after firing the save function. Now it works the first time because the array is empty so there's nothing to compare it to, it also works the second time, but from the third time on, it duplicates some of the objects inside and stores them in DB.

Here's my code:

saveNewSettings() {
   //THIS IS THE ARRAY I NEED TO EMPTY (ALREADY DECLARED IN THE DATA OBJECT)
   /* this.newItems = [
                        { id="123", name="a", otherProps="someProps" },
                        { id="456", name="ab, otherProps="someProps" },
                        { id="789", name="c", otherProps="someProps" },
                      ]
   */
   //THIS IS THE AN EMPTY ARRAY I'M USING TO COMPARE LATER ON... (ALREADY DECLARED IN THE DATA OBJECT)
   // this.newlyCreatedItems = [];

   if ( !this.newlyCreatedItems.length ) {
      this.newlyCreatedItems = this.newItems;
   } else {
      for ( let i = 0; i < this.newItems.length; i   ) {
          for ( let j = 0; j < this.newlyCreatedItems.length; j   ) {
              if ( this.newItems[i].id == this.newlyCreatedItems[j].id ) {
                 this.newItems.splice( i, 1 );
              }
          }
      }
   }

   //THIS IS THE SERVICE I USE TO SEND THE INFO TO THE BACK END
   //THIS ONE HAS BEEN IMPORTED FROM AN SERVICE FILE
   settingsService.save( this.newItems )
   .then(response => {
        //WHAT TO DO AFTER THE RESPONSE GOES HERE
   });
}

So here's the thing, firing the function for the first time, since it's the first, doesn't duplicate anything in the database... For the second time, it works well and it only saves the new item, from the third time on, it starts duplicating.

If you need me to elaborate more, just let me know, I thank you all in advance...

CodePudding user response：

Quick and dirty using jQuery:

var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
var uniqueNames = [];
$.each(names, function(i, el){
    if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
});

CodePudding user response：

Simplest approach:

const uniqueNames = Array.from(new Set(names));

uniqueNames.forEach(doSaveOperation);