send same event to two different functions of corresponding button click in Angular 2 Typescript

Question

I have a service that fetches JSON data that I subscribe to in two different variables in my component. I have two drop down lists and each one makes use of one variable to filter data. I then send this data to another set of buttons Array or List. Each drop-down should operate independently.

<div class="TSO-ddl" >
    <md-select [(ngModel)]="selectedISO" (ngModelChange)="onSelect($event,selectedISO)" placeholder="TSO"  >
        <md-option  value="Charge Only"  > Charge Only </md-option>
        <md-option  value="PJM"  >PJM  </md-option>
        <md-option  value="Not in ISO Market"  > Not in ISO Market </md-option>
        <md-option  value="UCSD"  > UCSD </md-option>
        <md-option  value="Any" > Any </md-option>
    </md-select>
</div>

<div class="Status-ddl">
    <md-select [(ngModel)]="selectedStatus" (ngModelChange)="onSelect($event,selectedStatus)" placeholder="Status" >
        <md-option  value="NC"  >  Not Connected </md-option>
        <md-option  value="GI"  > Active  </md-option>
        <md-option  value="SLP"  >  Sleeping </md-option>
        <md-option  value="IA"  > Inactive  </md-option>
        <md-option  value="Any"  > Any  </md-option>
    </md-select>
</div>

<md-list-item class="ui-primary-selector"> 
   <div>  
       <label  class="labeltag"> View </label>
       <button md-button  *ngFor="let view of viewButtons "  [ngClass]="{'selected-item' :view === selectedView}" type="button" (click)="onClickView(selecctedISO,view); onClickView2(selectedStatus,view)">
        {{view.Name}} </button>
  </div>
</md-list-item>

TS file

    constructor(private vehicleService: VehicleService) {
        this.isoArray = [];
        this.statusArray = [];
        this.isoToShow = this.isoArray;
        this.statusToShow = this.statusArray;
    }

    ngOnInit() {
        this.vehicleService.getIVS()
            .subscribe(isoArray => {
                this.isoArray = isoArray;
                this.isoToDisplay();

            },
            error => this.errorMessage = <any>error);

        this.vehicleService.getIVS()
            .subscribe(statusArray => {
                this.statusArray = statusArray;
                this.statusDisplay();

            },
            error => this.errorMessage = <any>error);
    }


    viewButtons: IButton[] = [
        { Id: 1, Name: 'Array' },
        { Id: 2, Name: 'List' }
    ];

    onSelect(val, button: IButton) {

        if (val = "Charge Only" || "PJM" || "USCD" || "Not in ISO Market" || "Any") {
            this.selectedISO = val;
            this.onClickView(val, button)
        }
        else if (val = "NC" || "GI" || "SLP" || "IA") {
            this.selectedStatus = val;
            this.onClickView2(val, button);
        }
        console.log(val);
    }

    onClickView2(val, button: IButton) {

        this.selectedView = button;
        if (button.Id == 1) {
            val = this.selectedStatus;
            console.log(val);
            if (val === "Any")
            { this.statusToShow = this.statusArray; }
            else
            { this.statusToShow = this.statusArray.filter(resource => resource.primary_status === val); }


            //displays an array

        }
        else if (button.Id == 2) {
            val = this.selectedStatus;

            if (val === "Any")
            { this.statusToShow = this.statusArray; }
            else
            { this.statusToShow = this.statusArray.filter(resource => resource.primary_status === val); }
        }

        //displays a list
    }

    onClickView(val, button: IButton) {

        this.selectedView = button;
        if (button.Id == 1) {
            val = this.selectedStatus;
            console.log(val);
            if (val === "Any")
            { this.isoToShow = this.isoArray; }
            else
            { this.isoToShow = this.isoArray.filter(resource => resource.iso_id === val); }
            //displays an array

        }
        else if (button.Id == 2) {
            val = this.selectedStatus;

            if (val === "Any")
            { this.isoToShow = this.isoArray; }
            else
            { this.isoToShow = this.isoArray.filter(resource => resource.iso_id === val); }
        }
        //displays a list
    }

My problem is that the event from the drop-downs gets sent to only one of the functions while the other gets a null value. How can I send data to both functions from the onSelect() whenever there is a corresponding value.

BogdanC · Accepted Answer · 2017-08-31 18:52:22Z

1

Call the second function from the first one and pass the event or another parameter you want:

onSelect(val, button: IButton) {
  onSelect2(val, button);
  //do something
}

onSelect2(val, button: IButton) {
  //do something
}

Edit

To filter the dataset for display using the value selected on md-select:

HTML

<div class="TSO-ddl" >
    <md-select (change)="onSelect($event)" placeholder="TSO"  >
        <md-option  value="Charge Only"  > Charge Only </md-option>
        <md-option  value="PJM"  >PJM  </md-option>
        <md-option  value="Not in ISO Market"  > Not in ISO Market </md-option>
        <md-option  value="UCSD"  > UCSD </md-option>
        <md-option  value="Any" > Any </md-option>
    </md-select>
</div>

Component

const data =[
     { iso_id: 'Charge Only',  name: 'Zero', status="NC" },
      { iso_id: 'Charge Only', name: 'Mr. Nice', status="NC" },
      { iso_id: 'PJM', name: 'Narco', status="IA" },
      { iso_id: 'PJM', name: 'Bombasto', status="IA" },
      { iso_id: 'PJM', name: 'Celeritas' , status="NC"},
      { iso_id: 'Not in ISO Market', name: 'Magneta', status="GI" },
      { iso_id: 'Not in ISO Market', name: 'RubberMan', status="SLP" },
      { iso_id: 'Not in ISO Market', name: 'Dynama' , status="GI"},
      { iso_id: 'UCSD', name: 'Dr IQ' , status="NC"},
      { iso_id: 'UCSD', name: 'Magma' , status="SLP"},
      { iso_id: 'UCSD', name: 'Tornado' , status="NC"}
    ];
displayList = Array<any>;

onSelect(val){
    if (val.value === 'Any'){
      this.displayList = this.data.slice();
    }else {
      this.displayList = this.data.filter(data => data.iso_id === val.value);
    }
  }

Basically, on (change) event we call the method passing the event, then we read the value of event which is the value of selected option and we filter the data to a new array for display. As a suggestion, would be better if you read the data for each iso_id returned by the service and then instantiate the value of each md-option with all unique values you have read.

Find the modified working plunker here

edited Aug 31, 2017 at 18:52

answered Aug 24, 2017 at 17:16

BogdanC

2,7942 gold badges26 silver badges22 bronze badges

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

7 Comments

Nitz1308 Over a year ago

Thanks but I'm still getting an empty array

BogdanC Over a year ago

Frankly, I still don't get what you try to achieve. You have two dropdowns and two buttons. With those 4 you want to filter the same array? What is your flow? I have made a plunker here with your code, maybe that will help you to explain.

Nitz1308 Over a year ago

I was unable to replicate my issue in the plunk, since I couldn't set up the JSON data in a service. Basically the user gets to pick out of drop-down A or dropdown B. Each displays the same JSON dataset but filters according to criteria A or B. The buttons are for deciding whether you want to display an array of data or a list. If I use 2 functions in the buttons I don't get the data for one of the functions

BogdanC Over a year ago

Instead of using a service, declare directly the json on your component on plunker and try to replicate the issue.

Nitz1308 Over a year ago

Hi. Thank you for your patience. This plnkr.co/edit/cTytNTr2cVXCX2yJEIIO?p=preview is as far as I got with replicating the issue. I haven't worked with plunker before and it is giving me too many errors and keeps breaking when I add things to it. Currently I've got the TSO drop down and buttons to work but the buttons are not filtering and instead display all values. This has become really frustrating. Do you have any suggestions? Thanks in advance

|

Nitz1308 · Accepted Answer · 2017-09-04 18:44:48Z

I realized where I was going wrong in the code.

onSelect(val, button: IButton) {

        if (val = "Charge Only" || "PJM" || "USCD" || "Not in ISO Market" || "Any") {
            this.selectedISO = val;
            this.onClickView(val, button)
        }
        else if (val = "NC" || "GI" || "SLP" || "IA") {
            this.selectedStatus = val;
            this.onClickView2(val, button);
        }
        console.log(val);
    }

The part where I compare the values is incorrect. I fixed the issue by correcting the if statement like this-

if (val = "Charge Only" || val ="PJM" || val ="USCD" || val = "Not in ISO Market" || val ="Any") {
                this.selectedISO = val;
                this.onClickView(val, button)
            }

Thank you so much to the users for all the help!

Collectives™ on Stack Overflow

send same event to two different functions of corresponding button click in Angular 2 Typescript

2 Answers 2

Edit

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related