Getting a unique array from a service in Angular [duplicate]

Question

I have a service that contains information about members. One of the variables here is the team string.

In my component, I call the service method to put the information in a variable before showing it in the component.

I would like to fill the variable "teams" in my component with an unique list of teams in the service. This should take into account writing (so I would use toUpperCase()).

My service:

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

@Injectable()
export class UserinfoService
{
    //methods or services
    getMembers()
    {
        return [
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                team: "TEAM A",
                number: "+123456798",
                bio: "Lorem ipsum dolor sit amet,...",
                isActive: true
            },
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                team: "TEam A",
                number: "+123456798",
                bio: "Lorem ipsum dolor sit amet,...",
                isActive: false
            },
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                team: "TEAM B",
                number: "+123456798",
                bio: "Lorem ipsum dolor sit amet,...",
                isActive: true
            },
        ];
    }
    //constructor
    constructor()
    {
    }
}

my component:

import { Component, OnInit } from '@angular/core';
import { UserinfoService } from '../services/userinfo.service';


@Component({
  selector: 'app-teammembers',
  templateUrl: './teammembers.component.html',
  styleUrls: ['./teammembers.component.css']
})
export class TeammembersComponent implements OnInit
{
    //props
    teammembers: any[];
    teams:any[];

    constructor(userinfoService: UserinfoService)
    {
        //getData
        this.teammembers = userinfoService.getMembers();
    }            

  ngOnInit() {
  }
}

this.teams = uniq(this.teammembers.map(member => member.team)). You can write uniq yourself, or use a library. — user663031
– user663031, Commented Jul 28, 2017 at 12:22

FAISAL · Accepted Answer · 2017-07-28 12:31:41Z

11

With ES6, you can achieve this in one line. Below is an example:

this.teams = this.teammembers
                 .map(item => item.team)
                 .filter((value, index, self) => self.indexOf(value) === index)

answered Jul 28, 2017 at 12:31

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

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

3 Comments

OldGrey Over a year ago

This is great. Works perfectly. Would you care to explain to me how it actually works? Thank you :)

FAISAL Over a year ago

@user3110254 Here you can find the documentation: learn.microsoft.com/en-us/scripting/javascript/reference/…

Faruk AYDIN Over a year ago

that sounds good!

Collectives™ on Stack Overflow

Getting a unique array from a service in Angular [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related