Loop through and delete elements in an array of objects

Question

In my Vue.js project I have an array of objects which I want to list through and display in the browser. My array contains four objects, I want to display only 3. The way I choose the 3 objects are dependent on a preference setting that the user has chosen somewhere else in the project and stored in a variable (below it is called userPreference). I am currently stuck on the best and most efficient way to remove one of the objects from my array based on the userPreference value.

My v-for in my template

<ul v-for="item in getOutroItems"><li>item<li></ul>

My object:

data() {
return {
  outroItems: [{ title: "outro1", text: "XYZ" }, { title: "outro2", text: "ABC" }, { title: "outro3", 
               text`enter code here`: "QRS" }, { title: "outro4", text: "TUV" }],
  userPreference: ""
};

}

My computed property (this is what I have so far)

getOutroItems() { 
   this.outroItems.filter((value) => {
     if(this.userPreference === "newsletter") {
        /// here I want to remove outro2 from my array and return an array with the other 3 values
     } else (this.userPreference === "noNewsletter") {
        /// here I want to remove outro3 from my array and return an array with the other 3 values
     }
   })
}

So, what is the best way to remove a specific element from an array?

Thanks in advance, and let me know if anything wasn't clear enough.

how many different values you can have for this.userPreference, or there are only 2 values that you just mentioned ? — namar sood
– namar sood, Commented Jul 7, 2020 at 13:54

Acid · Accepted Answer · 2020-07-07 13:56:11Z

1

Your requirement can be fulfilled by below code as array.filter just wants true or false in its return to accept or remove an element from its array.

getOutroItems() { 
   this.outroItems.filter((value) => {
     if(this.userPreference === "newsletter") {
        // here I want to remove outro2 from my array and return an array with the other 3 values
      return value.title != 'outro2';
     } else (this.userPreference === "noNewsletter") {
        // here I want to remove outro3 from my array and return an array with the other 3 values
    return value.title != 'outro3';
     }
   })
}

However if you want to not create another array if it is big. you should go with swapping such elements to be removed with the end indexed element in the array and popping those many elements from the array.

answered Jul 7, 2020 at 13:56

Acid

911 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StackByMe · Accepted Answer · 2020-07-07 13:55:29Z

There are multiple ways of getting the correct items from an array.

My preferred method and in your example: Using array.filter

const outroItems = [
  { title: "outro1", text: "XYZ" },
  { title: "outro2", text: "ABC" },
  { title: "outro3", text: "QRS" },
  { title: "outro4", text: "TUV" }
];

const leftOverItems = outroItems.filter((item) => item.title !== "outro2");

console.log(leftOverItems);

Another option is to find the index of the item to remove and then remove it with splice

const outroItems = [
  { title: "outro1", text: "XYZ" },
  { title: "outro2", text: "ABC" },
  { title: "outro3", text: "QRS" },
  { title: "outro4", text: "TUV" }
];

const itemToDelete = outroItems.find((item) => item.title === "outro2");
const indexToDelete = outroItems.indexOf(itemToDelete);

outroItems.splice(indexToDelete, 1);

console.log(outroItems);

Combining any of the functions above with a function will prevent you from writing duplicate code.

const itemToRemove = (arr, attr, name) => {
  return arr.filter((item) => item[attr] !== name);
}

const outroItems = [
  { title: "outro1", text: "XYZ" },
  { title: "outro2", text: "ABC" },
  { title: "outro3", text: "QRS" },
  { title: "outro4", text: "TUV" }
];

// Remove from "outroItems" where "title" is "outro2"
const removed2 = itemToRemove(outroItems, "title", "outro2");
// Remove from "outroItems" where "title" is "outro3"
const removed3 = itemToRemove(outroItems, "title", "outro3");
// Remove from "outroItems" where "text" is "TUV"
const removedTUV = itemToRemove(outroItems, "text", "TUV");

console.log(removed2);
console.log(removed3);
console.log(removedTUV);

Collectives™ on Stack Overflow

Loop through and delete elements in an array of objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related