Angular 2 - Filtering a Array Object not working

Question

I'm trying to implement a filter in Angular 2 class, but i'm getting an error for some reason. I'm not able to filter and return the results.

Class code:

employee = [
    { "empId": "59C", "empDesc": "Software","location":"Dallas"},
    { "empId": "AMI", "empDesc": "Hardware", "location":"San Francisco"}
  ];
  companies : any = [];
  comapny : any = [];
  test:string="varun";
  companyId = this.employee[0].empId;
  constructor(){
    for (let c of this.employee) {
      this.companies.push({
        empDesc: c.empDesc,
        empId: c.empId
      })
    };
   console.log("Companies",this.companies);
  }
  getCompanies(companies){
    if (this.companyId) {
                  var filtered = companies.filter(function (company) {
                      return company.companyId === this.companyId;
                  });

                  return filtered[0];
              }

  }

  this.company = this.getCompanies(this.companies);
  console.log("Filtered company", this.company);

Plunker link

https://plnkr.co/edit/CnBR4JouNhzH3DWm7QCo?p=preview

El houcine bougarfaoui · Accepted Answer · 2017-03-07 22:18:26Z

4

always run your code in the constructor, also company has no companyId,this gonna work :

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

@Component({
  selector: 'my-app',
  template: `
  <h1>Hello {{name}}</h1>
  <ul><li *ngFor="let c of companies">{{c.empId}} - {{c.empDesc}}</li></ul>
  `
})
export class AppComponent { 
   employee = [
    { "empId": "59C", "empDesc": "Software","location":"Dallas"},
    { "empId": "AMI", "empDesc": "Hardware", "location":"San Francisco"}
  ];
  companies : any = [];
  comapny : any = [];
  test:string="varun";
  companyId = this.employee[0].empId;
  constructor(){
    for (let c of this.employee) {
      this.companies.push({
        empDesc: c.empDesc,
        empId: c.empId
      })
    };
   console.log("Companies",this.companies);
   this.company = this.getCompanies(this.companies);
  console.log("Filtered company", this.company);
  }
  getCompanies(companies){
    let self = this;
    if (this.companyId) {
                  var filtered = companies.filter(function (company) {
                       return company.empId === self.companyId;
                  });

                  return filtered[0];
              }

  }


}

answered Mar 7, 2017 at 22:18

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

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

2 Comments

Varun Over a year ago

Thanks, that worked. But, why did we use, let self = this; in the function? And the function is not working when I replace self with this in "return company.empId === self.companyId;". Can you tell me why that's happening?

El houcine bougarfaoui Over a year ago

because if we used this it will refer to the companies array which has no comanyId field. in other words this of the class will be shadowed by this of the companies array in its filter method.

Bruno João · Accepted Answer · 2017-03-07 22:23:57Z

3

Your plunker does not work. Your pboblem is with the two last lines:

this.company = this.getCompanies(this.companies);

console.log("Filtered company", this.company);

You shouldn't call methods or console.log directly in classes. You need to put this thing inside your constructor. Like:

employee = [
  { "empId": "59C", "empDesc": "Software","location":"Dallas"},
  { "empId": "AMI", "empDesc": "Hardware", "location":"San Francisco"}
];
companies : any = [];
comapny : any = [];
test:string="varun";
companyId = this.employee[0].empId;
constructor(){
  for (let c of this.employee) {
    this.companies.push({
      empDesc: c.empDesc,
      empId: c.empId
    })
  };
  this.company = this.getCompanies(this.companies);
  console.log("Filtered company", this.company);
  console.log("Companies",this.companies);
}
getCompanies(companies){
  if (this.companyId) {
                var filtered = companies.filter(function (company) {
                    return company.empId === this.companyId;
                });

                return filtered[0];
            }

}

edited Mar 7, 2017 at 22:23

answered Mar 7, 2017 at 22:12

Bruno João

5,6042 gold badges23 silver badges26 bronze badges

2 Comments

cyr_x Over a year ago

And a company in companies didn't have a field called companyId.(only empId) And maybe he should use Array.find instead of Array.filter in his case.

MikeOne Over a year ago

And please please.. use arrow functions as callbacks.. that will prevent a lot of 'this' confusion in your code..

Collectives™ on Stack Overflow

Angular 2 - Filtering a Array Object not working

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related