Remove object from an array on selection of dropdown

Question

Working with Angular 8 , I have problem in my logic.

There are two drop downs:

First Drop down

The options in the first drop down is shown 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>

options in second drop down is shown from same array of objects , but object selected in the first dropdown should be removed from 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);


  }
}

Sachila Ranawaka · Accepted Answer · 2020-01-16 10:25:31Z

1

You can have a ngModel values on the select elements and use a get property to filter the 2nd array

  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

answered Jan 16, 2020 at 10:25

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Comments

qiAlex · Accepted Answer · 2020-01-16 10:19:52Z

1

There are several ways how to achieve expected behavior, one of them is:

We can set getter for r_rsList that will clone s_rsList except selected item.

working example: https://stackblitz.com/edit/angular-fjttxn?file=src%2Fapp%2Fapp.component.ts

answered Jan 16, 2020 at 10:19

qiAlex

4,3562 gold badges22 silver badges35 bronze badges

Comments

Soukyone · Accepted Answer · 2020-01-16 10:20:59Z

0

Just use 2 different array:

In your TS:

s_rsList = [.....] //your principal array
s_rsList_2;

constructor() {
  this.s_rsList_2 = this.s_rsList;
}

 getRsId(value){
    let Rsindex =   value.target['selectedIndex'];
    console.log(Rsindex);
    this.s_rsList_2 = this.s_rsList.filter((value, index) => index != Rsindex  )
  }

In your HTML

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




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

answered Jan 16, 2020 at 10:20

Soukyone

5772 silver badges13 bronze badges

Comments

Yash Agarwal · Accepted Answer · 2020-01-16 10:22:46Z

I have made some changes to your ts file. This is working as per my understanding of your requirement.

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)
  }
}

Dawood Valeed · Accepted Answer · 2020-01-17 14:33:32Z

0

Remove (change)="getRsId($event)" from 2nd select dropdown, change getRsId to:

 getRsId(value) {
   this.r_rsList = this.s_rsList.slice();
   this.r_rsList.splice(value.target["selectedIndex"], 1);
 }

answered Jan 17, 2020 at 14:33

Dawood Valeed

1551 silver badge5 bronze badges

Collectives™ on Stack Overflow

Remove object from an array on selection of dropdown

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related