Angular 6 Typescript extract element from array and compare

Question

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:

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

Can't you just filter in Workerobs.subscribe method itself with res.filter(......) ?? — Aditya Bhave
– Aditya Bhave, Commented Aug 27, 2018 at 12:27
NOT use a filter NOR *ngFor, use find and a variable this.myuser=workers.find(w=>w.id==id); — Eliseo
– Eliseo, Commented Aug 27, 2018 at 12:27

Suren Srapyan · Accepted Answer · 2018-08-27 12:23:31Z

4

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.

answered Aug 27, 2018 at 12:23

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

2 Comments

IkePr Over a year ago

This works! But can you please explain how does item know what to refer to ? I don't quite understand how this works

Suren Srapyan Over a year ago

We pass an arrow function to it. filter function will iterate over all items in the res and apply passed function like myPassedFunction(res[i]) something like this. The passed parameter will be visible in the function as item

Vinod Bhavnani · Accepted Answer · 2018-08-27 12:23:41Z

0

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.

answered Aug 27, 2018 at 12:23

Vinod Bhavnani

2,2431 gold badge17 silver badges19 bronze badges

Comments

BlizZard · Accepted Answer · 2018-08-27 12:27:17Z

0

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.

answered Aug 27, 2018 at 12:27

BlizZard

6016 silver badges24 bronze badges

Comments

manish · Accepted Answer · 2018-08-27 12:27:25Z

0

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>

answered Aug 27, 2018 at 12:27

manish

1,4588 silver badges13 bronze badges

Comments

Calidus · Accepted Answer · 2018-08-27 12:45:33Z

0

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

answered Aug 27, 2018 at 12:45

Calidus

1,4142 gold badges16 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular 6 Typescript extract element from array and compare

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related