Question 17100 in Laravel Question posted in
The official Laravel Documentation can be found here.

Remove all duplicate object elements from array – Laravel

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…

Tags:

2

Answers


  1. 0

    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);
});
    Login or Signup to reply.
  2. 0

    You tagged vue.js but this problem statement is more like from JavaScript side. Basically, You are doing shallow copy of the newItems array into the newlyCreatedItems array which causing the updation issue as both are referencing to the same pointer address.

    You can resolve this issue by deep copying with the help of structuredClone() method.

    Live Demo :

    let newItems = [
  { id: "123", name: "a", otherProps: "someProps" },
  { id: "456", name: "ab", otherProps: "someProps" },
  { id: "789", name: "c", otherProps: "someProps" }
];

let newlyCreatedItems = [];

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

saveNewSettings();

console.log(newlyCreatedItems);
console.log(newItems);

console.log('-------');

saveNewSettings();

console.log(newlyCreatedItems);
console.log(newItems);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search