Delete an item from an array when a dropdown selection is made

Question

Delete an item from an array when a dropdown selection is made

When dealing with Angular 8, I encountered a logic issue.

There are two drop-down menus:

First Drop-down

The options in the first menu are populated from an array of objects

Example Code, ts:

       {rs_id: "a5f100d5-bc88-4456-b507-1161575f8819",
        rs_code: "100006",
        rs_name: "Leanbox Logistics Solutions Pvt Ltd"} ,

     {rs_id: "a5f100d5-bc88-4456-b507-116157523345",
     rs_code: "123406",
     rs_name: "xysa Solutions Pvt Ltd"} , 

     {rs_id: "a5f100456-b507-116157523345",
     rs_code: "123406223",
     rs_name: "Solutions Pvt Ltd"} , 
  ]

html

<option>
    <select  (change)="getRsId($event)"  > 
    <option [value]='data.rs_id' *ngFor='let data of s_rsList  ; let i = index'> {{data.rs_name}} </option>



</select>

The options in the second drop-down menu are obtained from the same array of objects, but the object selected in the first drop-down should be removed from the Array.

Full code example:

slackbliz link ->

https://stackblitz.com/edit/angular-7lgyfe?file=src%2Fapp%2Fapp.component.html

html

<div> 

<p> First DropDown </p>

<select  (change)="getRsId($event)"  > 
<option [value]='data.rs_id' *ngFor='let data of s_rsList  ; let i = index'> {{data.rs_name}} </option>
</select>


<p> Second DropDown </p>

<select  (change)="getRsId($event)" > 
<option [value]='data.rs_id' *ngFor='let data of r_rsList  ; let i = index'> {{data.rs_name}} </option>
</select>



</div>

ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  s_rsList  :any = [
    {rs_id: "a5f100d5-bc88-4456-b507-1161575f8819",
     rs_code: "100006",
     rs_name: "Leanbox Logistics Solutions Pvt Ltd"} , 


     {rs_id: "a5f100d5-bc88-4456-b507-116157523345",
     rs_code: "123406",
     rs_name: "xysa Solutions Pvt Ltd"} , 

     {rs_id: "a5f100456-b507-116157523345",
     rs_code: "123406223",
     rs_name: "Solutions Pvt Ltd"} , 
  ]

  r_rsList : any = [] 


  constructor(){}


  getRsId(value){



    console.log(value);


    let Rsindex =   value.target['selectedIndex'];
    console.log(Rsindex);
    this.r_rsList.splice(Rsindex, 1);


  }
}

javascript arrays angular angular8

Answer 1

Answer №1

To filter the second array based on ngModel values of select elements, you can utilize a get property.

  selected_R_Item;
  selected_S_Item;

  get r_rsList() {
    return this.s_rsList.filter(item => item.rs_id !== this.selected_S_Item )
  }

Htm;

<select [(ngModel)]="selected_S_Item"     > 
<option [value]='data.rs_id' *ngFor='let data of s_rsList  ; let i = index'> {{data.rs_name}} </option>
</select> 

<select  [(ngModel)]="selected_R_Item"   > 
<option [value]='data.rs_id' *ngFor='let data of r_rsList  ; let i = index'> {{data.rs_name}} </option>
</select>

Demo

Answer 2

To filter the second array based on ngModel values of select elements, you can utilize a get property.

  selected_R_Item;
  selected_S_Item;

  get r_rsList() {
    return this.s_rsList.filter(item => item.rs_id !== this.selected_S_Item )
  }

Htm;

<select [(ngModel)]="selected_S_Item"     > 
<option [value]='data.rs_id' *ngFor='let data of s_rsList  ; let i = index'> {{data.rs_name}} </option>
</select> 

<select  [(ngModel)]="selected_R_Item"   > 
<option [value]='data.rs_id' *ngFor='let data of r_rsList  ; let i = index'> {{data.rs_name}} </option>
</select>

Demo

Answer 3

Answer №2

There are multiple approaches to achieve the desired outcome, one of which involves:

A getter can be set for r_rsList to duplicate s_rsList excluding the selected item.

Here is a demonstration: https://stackblitz.com/edit/angular-fjttxn?file=src%2Fapp%2Fapp.component.ts

Answer 4

There are multiple approaches to achieve the desired outcome, one of which involves:

A getter can be set for r_rsList to duplicate s_rsList excluding the selected item.

Here is a demonstration: https://stackblitz.com/edit/angular-fjttxn?file=src%2Fapp%2Fapp.component.ts

Answer 5

Answer №3

To efficiently manage your data, consider using two separate arrays:

In your TypeScript file:

s_mainArray = [.....] // Your main array
s_secondaryArray;

constructor() {
  this.s_secondaryArray = this.s_mainArray;
}

getFilteredData(value){
    let index = value.target['selectedIndex'];
    console.log(index);
    this.s_secondaryArray = this.s_mainArray.filter((value, idx) => idx != index)
}

In your HTML:

<select (change)="getFilteredData($event)"> 
  <option [value]='item.id' *ngFor='let item of s_mainArray; let i = index'> 
    {{item.name}} </option>
</select>




<select (change)="getFilteredData($event)"> 
  <option [value]='item.id' *ngFor='let item of s_secondaryArray; let i = index'> 
    {{item.name}} </option>
</select>

Answer 6

To efficiently manage your data, consider using two separate arrays:

In your TypeScript file:

s_mainArray = [.....] // Your main array
s_secondaryArray;

constructor() {
  this.s_secondaryArray = this.s_mainArray;
}

getFilteredData(value){
    let index = value.target['selectedIndex'];
    console.log(index);
    this.s_secondaryArray = this.s_mainArray.filter((value, idx) => idx != index)
}

In your HTML:

<select (change)="getFilteredData($event)"> 
  <option [value]='item.id' *ngFor='let item of s_mainArray; let i = index'> 
    {{item.name}} </option>
</select>




<select (change)="getFilteredData($event)"> 
  <option [value]='item.id' *ngFor='let item of s_secondaryArray; let i = index'> 
    {{item.name}} </option>
</select>

Answer 7

Answer №4

I have updated your TypeScript file based on the requirements you provided.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  s_rsList  :any = [
    {rs_id: "a5f100d5-bc88-4456-b507-1161575f8819",
     rs_code: "100006",
     rs_name: "Leanbox Logistics Solutions Pvt Ltd"} , 


     {rs_id: "a5f100d5-bc88-4456-b507-116157523345",
     rs_code: "123406",
     rs_name: "xysa Solutions Pvt Ltd"} , 
  ]

  r_rsList : any = [] 

  constructor(){}


  getRsId(value){



    console.log(value);
    let Rsindex =   value.target['selectedIndex'];
    console.log(Rsindex);
    this.r_rsList=this.s_rsList.slice();
    this.r_rsList.splice(Rsindex,1)
  }
}

Answer 8

I have updated your TypeScript file based on the requirements you provided.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  s_rsList  :any = [
    {rs_id: "a5f100d5-bc88-4456-b507-1161575f8819",
     rs_code: "100006",
     rs_name: "Leanbox Logistics Solutions Pvt Ltd"} , 


     {rs_id: "a5f100d5-bc88-4456-b507-116157523345",
     rs_code: "123406",
     rs_name: "xysa Solutions Pvt Ltd"} , 
  ]

  r_rsList : any = [] 

  constructor(){}


  getRsId(value){



    console.log(value);
    let Rsindex =   value.target['selectedIndex'];
    console.log(Rsindex);
    this.r_rsList=this.s_rsList.slice();
    this.r_rsList.splice(Rsindex,1)
  }
}

Answer 9

Answer №5

Erase the (change)="fetchRsId($event)" from the second dropdown menu, update fetchRsId to:

 fetchRsId(selection) {
   this.filtered_rsList = this.available_rsList.slice();
   this.filtered_rsList.splice(selection.target["selectedIndex"], 1);
 }

Answer 10

Erase the (change)="fetchRsId($event)" from the second dropdown menu, update fetchRsId to:

 fetchRsId(selection) {
   this.filtered_rsList = this.available_rsList.slice();
   this.filtered_rsList.splice(selection.target["selectedIndex"], 1);
 }

Delete an item from an array when a dropdown selection is made

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

The issue of AngularJS failing to bind object properties to the template or HTML element

"Troubleshooting: Issue with updating page CSS in browser when using npm, node-sass, and concurrent in an

The onchange function seems to be malfunctioning when attempted with AJAX

A node module designed to efficiently convert multiple TIFF images into a single multipage TIFF document

Utilizing FullCalendar for showcasing comprehensive details

Unexplainable space or padding issue detected in OwlCarousel grid gallery

When creating a responsive datatable in Angular, be aware that the reference to "this.table

Is it possible to update the state of an array within a .then() function in React?

extract element from a string with the help of jquery

What is a way to nest a promise request within another request?

The Selenium driver's execute_script() function is not functioning as expected

Typescript's dynamic React component and its conditional types

Leveraging the outcome of an API request with Protractor

Encountered an issue locating the stylesheet file 'css/style.css' that is supposed to be linked from the template. This error occurred when trying to integrate Bootstrap with Angular

What is the process of synchronizing state in react.js?

javascript guide to dynamically update the glyphicon based on value changes

Invoking a class method in Javascriptcore on iOS

Developing an ASP application using the MVP pattern to return JSON data can be transformed into a S

Loader for dynamically loading tabs in Angular 2