Angular, delete any item from the scope that has a matching key value

One of the challenges I am facing is removing items from an array with the same key value of skillId when a button in the repeat is clicked. Here's the code snippet I have worked on:

$scope.deleteSkill = function(skill) {  

     for (var i=0; i<$scope.pathArray.length; i++){

        if($scope.pathArray[i].skillId == skill){
            $scope.pathArray.splice(i,1);
        }
    };

};

The deletion process occurs within a repeat loop where the "skill" passed represents its skillId and is functioning as intended. My attempt involves iterating through the scope's array and eliminating any item with a matching skillId. However, upon testing my logic, it appears that only one item is removed even if there are multiple matches. Any insights or assistance would be greatly appreciated. Thank you!

Answer №1

To efficiently remove elements from an array, it's important to iterate through the array from the last index to the first. This approach takes into account the changing length of the array as elements are removed.

$scope.removeElement = function (element) {
    for (var i = $scope.itemsArray.length - 1; i >= 0; i--) {
        if ($scope.itemsArray[i].id == element) {
            $scope.itemsArray.splice(i, 1);
        }
    };
};

Answer №2

In addition to my previous comment, consider implementing a basic comparison of the opposite.

$scope.removeSkill = function(skill)
{
    var newArray = [];
    for (var j = 0; j < $scope.skillSet.length; j++)
    {
      if ($scope.skillSet[j].id != skill) newArray.push(skill) //add the skill or other array value
    }
    $scope.skillSet = newArray;
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement validation for individual elements within an array that are being displayed on a webpage using a for loop?

Currently, I am utilizing Vue JS within the Vuetify framework to build a dynamic form: <v-text-field v-for="items in itemsArray" :key="items.id" v-model="items.data" :label="items.name" ></v-text-field> ...

Transfer elements from collections employing multer

Data Payload Example:- education[0][university]: jru education[0][degree]: mca education[0][specialization]: computer application education[0][certificate_pdf_url]: (binary) education[0][degree_type]: Teaching Degree education[0][years_of_study]: [&q ...

Delivering seamless css integration using express.js

Lately, I've been struggling with serving CSS using Express.js. After some trial and error, I managed to make it work. However, I'm puzzled as to why my new code works while the old one doesn't. Here's the code that now works for me: co ...

What is the process through which React form elements receive the event parameter?

I'm currently working on a form component that looks like this: import React from 'react'; class CommentBox extends React.Component { constructor(props) { super(props); this.state = { value: '' } this.han ...

Utilizing Bootstrap Modals to seamlessly redirect me to a new empty page

Despite the fact that my website functions perfectly fine without a build system, I am encountering an issue with the Bootstrap modals while using the Yeoman: Angular + Gulp build system. Whenever I click on a list item, instead of the modal appearing, it ...

Creating a specialized .toString() function for an array

When trying to create a custom .toString() method on the Array prototype, how can you access the actual array that the method is called on? This approach seems to work: Array.prototype.toString = () => 'custom'; "" + [1,2,3]; // 'custom ...

Decoding JSON on 9gag

I am trying to select a random image from the following URL: In order to display it correctly, I need to determine the size of the image. I am utilizing YQL to store the JSON result in a variable (referred to as source). After replacing 'https&apos ...

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

In my angularJS application, I am utilizing SmartyStreets' LiveAddress for address validation and autofilling two fields in a form. After the user submits the form, a message (either success or failure) is displayed in a div above the form. However, t ...

Transform JSON time data from Coordinated Universal Time (UTC) to Indian Standard

Hello, I consider myself an amateur in the world of online javascript learning. Currently, I have come across a challenge that has left me stuck. I am working with a JSON time data provided in UTC format (e.g. 16:00:00Z) and my goal is to convert it to IS ...

I am unable to store rich text fields using LocalStorage

My goal is to store form data in localStorage, but I'm facing an issue with rich text fields not saving their data. Regular HTML fields like textboxes work fine. In my Razor markup for the field (using MVC), here is an example: <div class="form-g ...

I am currently transferring cross-site forgery tokens through jQuery strings. However, on the subsequent page, I create a fresh token which means their original tokens will no longer align

Alright, so I've been storing the tokens in a session: Session::get('token', 'randomtokenstringhere'); Every time a form is submitted, whether successfully or not, I generate a new token and update their session token. But let&ap ...

Troubleshooting ASP.NET MVC3: The mystery behind why my custom validation attributes always seem to fail

After completing several tutorials, I have successfully implemented my models from a library file (dll). Everything seems to be functioning correctly except for one issue. Here is my model: public class RoomBookingInsert { public Int32 CostCentreNo ...

Utilize the power of Wikitude within an Angular 2 application

I am currently working on integrating Wikitude Architect View in Angular 2 by referring to the code at this link. My goal is to implement this code in an Angular 2 compatible way. import * as app from 'application'; import * as platform from & ...

The elusive cookie in NodeJS remained just out of reach

After setting a cookie using the code below: router.get("/addCartToCookie", function(req, res) { let options = { maxAge: 1000 * 60 * 15, httpOnly: true, }; let cartData = { name: "test cookie", slug: slugify(&quo ...

How to export HTML table information to Excel using JQuery and display a Save As dialog box

This script has been an absolute lifesaver for my web application. Huge thanks to sampopes for providing the solution on this specific thread. function exportToExcel() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6& ...

Cutting Out Sections of a List

I'm currently working on an app that involves looking up and navigating to specific locations. I've encountered an issue with the coordinates in my code containing a ',0' at the end, which is not compatible with Google Maps. Manually re ...

Merge shared attributes into JSON with the help of JavaScript

I am looking to include a shared property in my JSON Object. Below is an example of the JSON object: data = [ { COUNTRY: 'USA', POPULATION: 300, }, { COUNTRY: 'USA', POPULATION: 50, }, { COUNTRY: 'Cana ...

Having trouble with a React child component not reacting to a click event?

The current issue I am experiencing is that the component is not triggering a click event when the button is clicked. TickerPage render() { return ( <div className="TickerPage"> <div className="TickerPage-container"> <b ...

In Angular, the process of duplicating an array by value within a foreach function is not

I have been attempting to duplicate an array within another array and make modifications as needed. this.question?.labels.forEach((element) => { element["options"] = [...this.question?.options]; // I've tried json.stringify() as wel ...

Utilizing JavaScript to Load an HTML File in a Django Web Development Project

Having a django template, I aim to load an html file into a div based on the value of a select box. The specific target div is shown below: <table id="template" class="table"> Where tables are loaded. </table> There ex ...