CODEWITHSUNDEEP
javascriptarraysangulartypescript
IkePr
IkePr

Reputation: 930

Angular 6 Typescript extract element from array and compare

I have this component:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-workers-edit',
  templateUrl: './workers-edit.component.html',
  styleUrls: ['./workers-edit.component.css']
})
export class WorkersEditComponent implements OnInit {
  public workerid;
  public lastname;
  public address;
  public phone;
  public email;

  workers = [];

  constructor(private route: ActivatedRoute, private http: HttpClient) { }

  ngOnInit() {
    let id = parseInt(this.route.snapshot.paramMap.get('id'));
    this.workerid = id;

    let Workerobs = this.http.get('http://myurlPP/cfcs/workernameapi.cfm');
    Workerobs.subscribe((res:any)=> {
      console.log(res);
      this.workers = res;

    });

  }

}

The workers array after this contains the following: enter image description here

In my html, if I do this:

<ul>
    <li *ngFor="let name of workers">{{name.WNAME}}</li>
</ul>

I will get all the names from the array and display them, which is okay.

But I need to display only the name with the matching workerid. (I have the workerid at because of let id = parseInt(this.route.snapshot.paramMap.get('id')); this.workerid = id;

So how can I extract from the workers array the WID, compare it to workerid, if it is true, display only the WNAME (worker name) ?

Upvotes: 2

Views: 3586

Answers (5)

Calidus
Calidus

Reputation: 1414

If you know Worker ID is unique you should use find instead of filter, as it will return the first matching item in the array.

  selectedWorker: any;

  constructor(private route: ActivatedRoute, private http: HttpClient) { }

  ngOnInit() {
    let id = parseInt(this.route.snapshot.paramMap.get('id'));
    this.workerid = id;

    let Workerobs = this.http.get('http://myurlPP/cfcs/workernameapi.cfm');
    Workerobs.subscribe((res:any)=> {
      this.selectedWorker = res.find((worker) => worker.workerid === this.workerid);
      if (this.selectedWorker === undefined) {
         console.log('no worker with id:' + id + ' was found'
      }
    });

Upvotes: 0

manish
manish

Reputation: 1458

you can do that cleanly in your UI too, just by adding an *ngIf="condition" :

<ul>
   <li *ngIf="worker.WID == workerid" *ngFor="let worker of workers">{{worker.WNAME}}</li>
</ul>

Upvotes: 0

BlizZard
BlizZard

Reputation: 589

Do the below codes, to get your required functionality:

<ul>
    <li *ngFor="let name of workers">
        <ng-container *ngIf="name.WID == this.workerid">{{name.WNAME}}</ng-container>
    </li>
</ul>

This much should help you do the trick. Please ask if need any changes in functionality.

Upvotes: 0

Vinod Bhavnani
Vinod Bhavnani

Reputation: 2225

ngOnInit() {
    let id = parseInt(this.route.snapshot.paramMap.get('id'));
    this.workerid = id;

    let Workerobs = this.http.get('http://myurlPP/cfcs/workernameapi.cfm');
    Workerobs.subscribe((res:any)=> {
      console.log(res);
      this.workers = res.filter((worker) => worker.id === this.workerid);
    });

  }

All you need to do is filter the workers array as above.

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68655

You can filter your array inside subscribe function

Workerobs.subscribe((res:any)=> {
    console.log(res);
    this.workers = res.filter(item => item.WID === this.workerid);
});

Maybe property names will be misstype in the filter function, so adjust them for your case.

Upvotes: 4

Related Questions