Как получить уникальные значения свойства Observable Array - Angular

Question

У меня есть приложение Angular, и у него есть служба, которая получает данные от поддельного API, и она возвращает массив объектов, как показано ниже:

[
  {
    "userId": 1,
    "id": 1,
    "title": "quidem molestiae enim"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "sunt qui excepturi placeat culpa"
  },
  {
    "userId": 2,
    "id": 3,
    "title": "omnis laborum odio"
  },
  {
    "userId": 2,
    "id": 4,
    "title": "non esse culpa molestiae omnis sed optio"
  },
  {
    "userId": 3,
    "id": 5,
    "title": "eaque aut omnis a"
  },
  {
    "userId": 4,
    "id": 6,
    "title": "natus impedit quibusdam illo est"
  },
  ]

Я хочу получить уникальные значения свойства userId без дублирования, поэтому я должен получить эти значения: 1 2 3 4

Так как реализовать это в Angular4 ..

Вот мой код:

1- Service.ts: возвращает все данные без фильтрации дублированных значений.

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map'
import "rxjs/Rx";



@Injectable()
export class AlbumsService {


  constructor(private _http:HttpClient) { }
  serveLink:string = "https://jsonplaceholder.typicode.com/albums"

  getUniqueUserIDs():Observable<IAlbums[]>
  {
    return this._http.get<IAlbums[]>(this.serveLink).map(response=>response)
  }

}

2-FilterComponent.ts: Здесь я регистрирую результаты в консоли, подписываясь на наблюдаемое.

import { Component, OnInit } from '@angular/core';
import { AlbumsService } from '../albums.service';


@Component({
  selector: 'app-filter-albums-by-user-id',
  templateUrl: './filter-albums-by-user-id.component.html',
  styleUrls: ['./filter-albums-by-user-id.component.css']
})
export class FilterAlbumsByUserIdComponent implements OnInit {

  constructor(private _albumsService:AlbumsService) { }

  ngOnInit() 
  {

    this._albumsService.getUserIDs()
    .subscribe 
     ((response)=>
      {
        console.log(response)
      }
    )

  }
}

Другой важный вопрос, в этом случае, где я должен написать логику? В методе Сервиса или в подписке Компонента?

Спасибо.

Answer 1

Используйте map, distinct и toArray:

return this._http.get<IAlbums[]>(this.serveLink).map(t=>t.userId).distinct().toArray();

Answer 2

Использование нового набора через ES6,

const response = [
  {
    "userId": 1,
    "id": 1,
    "title": "quidem molestiae enim"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "sunt qui excepturi placeat culpa"
  },
  {
    "userId": 2,
    "id": 3,
    "title": "omnis laborum odio"
  },
  {
    "userId": 2,
    "id": 4,
    "title": "non esse culpa molestiae omnis sed optio"
  },
  {
    "userId": 3,
    "id": 5,
    "title": "eaque aut omnis a"
  },
  {
    "userId": 4,
    "id": 6,
    "title": "natus impedit quibusdam illo est"
  },
  ];

const uniqueIds = [...new Set( response.map(obj => obj.userId)) ];
console.log(uniqueIds);

и вы должны сделать это на уровне компонента.