Filter array of objects in Angular4 without pipe

Question

I have an array of links that each element is an object that contain few strings - a link, description and category. I have different components that display the links, and I want in each component to display only the links of its category. So I want to filter the array by the category.

I have a mock-up array with all the links.

I try to filter the array of objects without a pipe. The reason why: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Apparently the Angular team suggests to do the filtering in the component level and not using a pipe: "The Angular team and many experienced Angular developers strongly recommend moving filtering and sorting logic into the component itself."

So here's my component:

@Component({
    selector: 'startups',
    templateUrl: './startups.component.html'
})

export class StartupsComponent implements OnInit {

constructor(private appLinksService: DigitalCoinHubService) { }

title = 'Startups';


links: DCHlinks[]; // create a new array in type of DCHlinks to get the data

startupsLinks: DCHlinks [] = []; // will build the startsups links only 


getLinks(): void {
  this.links = this.appLinksService.getLinks(); // gets the array with the data from the service

  for (let i in this.links)
  {
     if (this.links[i].dchCategory == 'startups' )
     {
         this.startupsLinks[i].push(this.links[i]);
     }

  }

}

ngOnInit() {
    this.getLinks();   

}

}

So first I get the big array from the service:

this.links = this.appLinksService.getLinks();

And then I try to build a new array that will contain only the relevant links. The filter is by the category. But then when I try to build the new array by push the elements which their category matches - it gives me error:

Property 'push' does not exist on type 'DCHlinks'.

DCHlinks is the object - this is the class:

export class DCHlinks {
   dchLink: string;
   dchLinkTitle: string;
   dchLinkDescription: string;
   dchCategory: string;
 }

Any idea how to do this simple filter? (and w/o pipe - see above reason why..)

Thanks!

Sajeetharan · Accepted Answer · 2017-11-26 04:47:05Z

5

You need to intialize the array as you did for startupsLinks

links: DCHlinks[] = [];

Or you can simply use array.filter to get the relavant data

this.startupsLinks = this.links.filter(t=>t.dchCategory == 'startups');

edited Nov 26, 2017 at 4:47

answered Nov 26, 2017 at 4:36

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

7 Comments

Menahem Gil Over a year ago

Hi, thanks. But if I don't filter then it works fine without initializing. So why only if do the loop that builds the new array I need also to initialize links? It means, if I only have this this.links = this.appLinksService.getLinks(); inside getLinks() , then it works fine

Sajeetharan Over a year ago

no you have not initialized, you have just declared the type

Menahem Gil Over a year ago

Just did it like you suggested. Still get this error: Property 'push' does not exist on type 'DCHlinks'.

Menahem Gil Over a year ago

Yes. Seems that this line causes the problem: this.startupsLinks[i].push(this.links[i]);

Sajeetharan Over a year ago

try to use filter as mentioned above

|

Narendra Maurya · Accepted Answer · 2019-09-27 06:49:37Z

I have the same issue but I resolve in different way. I have the Array of object and want to use filtering using of html select option .which I given the data that filter the array of object.

`$`






    heroes = [{
        name: "shubh",
        franchise: "eng"
      },
      {
        name: "Ironman",
        franchise: "Marvel"
      },
      {
        name: "Batman",
        franchise: "DC"
      },
      {
        name: "Batman",
        franchise: "DC"
      },
      {
        name: "Batman",
        franchise: "DC"
      },
      {
        name: "satman",
        franchise: "mc"
      },
      {
        name: "monmam",
        franchise: "DC"
      },
      {
        name: "loolman",
        franchise: "DC"
      },
      {
        name: "Thor",
        franchise: "Marvel"
      },
      {
        name: "monmam",
        franchise: "DC"
      },
      {
        name: "monmam",
        franchise: "DC"
      },
      {
        name: "monmam",
        franchise: "DC"
      },

      {
        name: "Thor",
        franchise: "Marvel"
      },
      {
        name: "Superman",
        franchise: "DC"
      },
      {
        name: "Superman",
        franchise: "DC"
      },
      {
        name: "Superman",
        franchise: "DC"
      },
      {
        name: "Superman",
        franchise: "DC"
      },

    ];
    //this is the most imp part in the filter section .I face lot of problem this is not working if this line not write .The filter method works old one time.
    newarr = this.heroes;

    //So I create new array which store the old array value every  time. and we replace the value in the filter function.
    filter(heroes: string) {
      console.log(heroes);
      this.heroes = this.newarr; // replace the value and store old value
      let heroesnew = this.heroes.filter((data => data.name == heroes));

      this.heroes = heroesnew;
      console.log(this.heroes);

    }
    <!––"#sel" is the template variable which gives the data of value property in option field ––>
    <select #sel class="custom-select custom-select-sm" (change)="filter(sel.value)">
      <option>All</option>
      <option value="Batman">Batman</option>
      <option value="Superman">Superman</option>
      <option value="satman">satman</option>
      <option value="monmam">monmam</option>
      <option value="Thor">thor</option>
    </select>

    <!–– this is the table that I want to filter––>
   <div>
      <table class="table table-hover ">
        <thead class="thead-dark">
          <tr>
            <th>#</th>
            <th>name</th>
            <th>franchise</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let incidence of heroes">
            <td>{{ incidence.name}}</td>
            <td> {{ incidence.franchise }}</td>
          </tr>
        </tbody>
      </table>
    </div>

$

use the code for angular 2+,to 8 It working fine ..

Collectives™ on Stack Overflow

Filter array of objects in Angular4 without pipe

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related