get a particular item inside an array in angular 4

Question

In Angular view I defined a variable data which is like this:

[{"name":"science", count: 3},
 {"name":"action", count: 1},
 {"name":"thriller", count: 1},
 {"name":"article",  count: 1},
]

" So in html file I want to get the count count value for name "science" or "article"

I tried like this:

 <span ng-repeat="item in data| filter: {name: "science"}"> 
    {{ item.count }} 

 </span>

but this gives nothing, I guess because of the filter. How can I do this? Can anyone help me?

If you're *actually* using Angular 4, that's completely wrong syntax. Please clarify. — jonrsharpe, Jan 06 '18 at 14:34
I'm new to this so I'm still learning sorry for the confusion — pinks, Jan 06 '18 at 14:36
Then spend some time learning it, e.g. run through the tutorial: https://angular.io/tutorial — jonrsharpe, Jan 06 '18 at 14:37
Possible duplicate of [Filtering an array in angular2](https://stackoverflow.com/questions/34417250/filtering-an-array-in-angular2) — planet_hunter, Jan 06 '18 at 14:39

Sajeetharan · Answer 1 · 2018-01-06T15:01:27.987

-1

First of all you are mixing up with AngularJS (1.x) syntax, with Angular (2+) you should use ngFor and a custom pipe for filtering.

 <span> <tr *ngFor="item in data  | sciencefilter:'science'"> {{ item.count }} </span>

and your filter should be

@Pipe({
    name: 'sciencefilter'
})
@Injectable()
export class ScienceFilterPipe implements PipeTransform {
    transform(items: any[], type: string): any {
        return items.filter(item => item.id.indexOf(type) !== -1);
    }
}

WITHOUT USING FILTER

count :number;

and then,

this.count = this.items.filter(t=>t.name ==='science');

and in component

 <span> 
    {{ count.length }}
 </span>

edited Jan 06 '18 at 15:01

answered Jan 06 '18 at 14:34

Sajeetharan

216,225
63
350
396

but I want to get the count value for a specific element not in a for loop – pinks Jan 06 '18 at 14:36
@pinks which element? – Sajeetharan Jan 06 '18 at 14:36
if "name":"science" – pinks Jan 06 '18 at 14:37
look at the example above – Sajeetharan Jan 06 '18 at 14:39
can I have direct access on array without using filter – pinks Jan 06 '18 at 14:45
`angular2/core`? Wow that is old. – Aluan Haddad Jan 06 '18 at 15:00
If name ==='science' doesn't exists it throw an error is there any way to prevent it so if there's no find, to make it 0? thanks for your help – pinks Jan 06 '18 at 15:13
Yes you can add an if condition if(item.length == 0) assign count as 0 – Sajeetharan Jan 06 '18 at 15:14
No I want to use the second method this.count = this.items.filter(t=>t.name ==='science'); – pinks Jan 06 '18 at 15:18
Did you sort it out – Sajeetharan Jan 06 '18 at 16:05

planet_hunter · Answer 2 · 2018-01-06T14:48:47.993

-1

You can use pipe like this -

import {Injectable, Pipe, PipeTransform} from 'angular2/core';

@Pipe({
    name: 'myfilter'
})
@Injectable()
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.id.indexOf(args[0]) !== -1);
    }
}

And the template would look like this -

*ngFor="let element of (elements | myfilter:'123')"

edited Jan 06 '18 at 14:48

answered Jan 06 '18 at 14:36

planet_hunter

3,866
1
26
39

I get this error " Cannot find name 'PipeTransform'" – pinks Jan 06 '18 at 14:45
Please go through the documentation. The example might have some bugs as it was not tested before posting. It will just help you providing the idea about the answer. Updating the answer anyway. – planet_hunter Jan 06 '18 at 14:48

get a particular item inside an array in angular 4

2 Answers2