Filter number of items with a certain property

Question

Good afternoon, everyone,

I am trying to filter the number of items in an array, which has a specific property and with a certain value (in this case: 'status: Open') in my array, to insert into a box type summary in the home with this format:

Below the files relating to this section in my project.

Template:

<div class="row summary">

<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
  <div class="summary-card total">
    <h1>{{bugList ? bugList.length : ''}}</h1>
    <div class="description">
      <div class="item" >
        Bugs total
      </div>
    </div>
    <img src="assets/img/folder.png" alt="bugs-total-icon">
  </div>
</div>

<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
  <div class="summary-card abertos">
    <h1>XX</h1>
    <div class="description">
      <div class="item">
        Bugs abertos
      </div>
    </div>
    <img src="assets/img/stopwatch.png" alt="bugs-abertos-icon">
  </div>
</div>

<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
  <div class="summary-card resolvidos">
    <h1>XX</h1>
    <div class="description">
      <div class="item">
        Bugs resolvidos
      </div>
    </div>
    <img src="assets/img/success.png" alt="bugs-resolvidos-icon">
  </div>
</div>

<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" hidden>
  <div class="summary-card enviadas">
    <h1>XX</h1>
    <div class="description">
      <div class="item">
        Sugestões enviadas
      </div>
    </div>
    <img src="assets/img/edit.png" alt="sugestoes-enviadas-icon">
  </div>
</div>

Component:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BugList } from './../bugs-list/bug-list.model';
import { BugsService } from './../bugs-list/bugs-list.service';
import { Bug } from '../add-bug/add-bug.model';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent {

bug: any

bugList: BugList[];


constructor(
private router: Router,
private bugsService: BugsService) { }

ngOnInit() {
this.bugsService.bugLists()
.subscribe(response => { this.bugList = response
  localStorage.setItem("bugs", JSON.stringify(response));
})}}

Interface:

export interface BugList {
id: string;
titulo: string;
usuario: string;
criacao: string;
atualizacao: string;
status: string;
}

Bugservice:

import {Injectable} from '@angular/core';
import {Http, Headers, HttpModule} from '@angular/http';
import { FormGroup } from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {BugList} from './bug-list.model';
import { Bug } from '../add-bug/add-bug.model'


@Injectable()
export class BugsService {

bug: Bug;
formEditBug: FormGroup;

constructor(
    private http: Http,
) {}

    bugLists(): Observable<BugList[]> {
        const headers = new Headers();
        headers.append('Content-Type', 'application/json')
        headers.append('Access-Control-Allow-Origin', '*')
        const token = localStorage.getItem('token')
        headers.append('Authorization', `Bearer ${token}`)

    return this.http.get(`${PORTAL_API}/Bug/listar-bugs`, { headers })
        // .map( response => response )
        .map( response => response.json() )

    }}

I need to filter the amount of Open Bugs and Closed Bugs by the Array Status property, can anyone help me?

Answer 1

You can use the method filter arrays

ngOnInit() {
this.bugsService.bugLists()
.subscribe(response => { 
  this.bugList = response
  this.bugsAbertos=this.bugList.filter(bug=>bug.status==='aberto')
  localStorage.setItem("bugs", JSON.stringify(response));
})}}