How to access a specific element in an array using Angular 4

Question

How to access a specific element in an array using Angular 4

Within my Angular view, I have declared a variable called data with the following values:

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

" I am attempting to extract the count value for the names "science" or "article" in an HTML file.

I have tried the following approach:

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

 </span>

However, this does not return any results. I suspect it is due to the filter. How can I achieve this? Any assistance would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

To create a custom pipe in Angular, you can follow this example -

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

You would use the pipe like this in your template -

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

Answer 2

To create a custom pipe in Angular, you can follow this example -

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

You would use the pipe like this in your template -

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

Answer 3

Answer №2

To begin, it's important to note that you are confusing AngularJS (version 1.x) syntax with Angular (version 2+) syntax. In Angular, you should utilize ngFor along with a custom pipe for filtering data.

<span> <tr *ngFor="let item of data | scienceFilter:'science'"> {{ item.count }} </span>

Your custom pipe implementation should look like this:

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

AVOIDING THE USE OF FILTER FUNCTION

count: number;

Then, in your component, you can do this:

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

Finally, in your HTML template:

<span> 
    {{ count }}
</span>

Answer 4

To begin, it's important to note that you are confusing AngularJS (version 1.x) syntax with Angular (version 2+) syntax. In Angular, you should utilize ngFor along with a custom pipe for filtering data.

<span> <tr *ngFor="let item of data | scienceFilter:'science'"> {{ item.count }} </span>

Your custom pipe implementation should look like this:

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

AVOIDING THE USE OF FILTER FUNCTION

count: number;

Then, in your component, you can do this:

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

Finally, in your HTML template:

<span> 
    {{ count }}
</span>

How to access a specific element in an array using Angular 4

Answer №1

Answer №2

Similar questions

Testing the functionalities in the link function of a directive

Prevent click-through on overlaying divs in Leaflet maps

"Assigning an array as a value to an object key when detecting duplicates in a

Position the div in the center of a container that is 100% width and has floating elements with dynamic widths

Unable to implement styling to an HTML element using Javascript

Converting an Excel formula expression into JavaScript code

CSS Style in Safari does not conceal Div on Tailwind

Property of a general object

Hover over a DOM element to highlight it, similar to the functionality of the inspect tool

Material-Table does not allow resizing of columns if there are more than 5 columns present

Issues encountered when using Three.js raycasting to position objects above a plane

Endless Node.js HTTP requests

The information is not appearing in the dropdown menu

incorporating SVG directly into a Leaflet popup using R

Is it possible to include an argument in an unnamed function in Node.js without assigning it to a variable?

The dynamic addition of divs to the HTML body is causing them to overlap

Convert the HTML string received from the backend API into an image and display it within the Angular mat-card

One way to transfer data from the back end into a two-dimensional array is by retrieving the data and then transforming it into the desired format before sending it to

Unable to locate the module '/workspace/mySQL/node_modules/faker/index.js'

Angular 2 Element Selection: Dealing with Unrendered Elements