Recently delving into rxjs within Angular 7, I encountered a challenge with an API that returns user details. My goal is to filter out objects with the same name, but my attempts using distinctUntilKeyChanged() have not yielded the desired results - the console output mirrors the original API response. Additionally, I'm curious if it's possible to directly utilize the returned data from the service in the component, given that the response is already an Observable compliant with Interface specifications, without resorting to From() or Of() methods.
This quandary pertains to Angular 7 and RxJS 6, as though I've been working with Angular for a year, RxJS remains uncharted territory for me. I find myself grappling with uncertainties, such as whether I can leverage the HTTP response from the service directly within the component, or if I should implement operators to convert the response into a stream. In essence, can I work with the JSON response directly in the component while utilizing various operators like find(), first(), ignoreElements, etc...
Snippet from user.service.ts:
private urlLara = 'http://laravel.technalatus.com/public/api/'
public getusers(): Observable<User> {
const head = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json',
})
return this.http.get<User>(this.urlLara + 'users', { headers: head });
}
Snippet from component.ts:
export class AppComponent implements OnInit {
title = 'angularrxjs';
items: {};
post: Post;
user: User;
public searchTerm: string;
constructor(private UserService: UserService) {}
ngOnInit() {
this.distinct()
}
public Duchanged() {
// custom compare for name
this.UserService.getusers().pipe(distinctUntilChanged((prev, curr) => prev.name === curr.name))
.subscribe(console.log);
}
Current Output:
[
{id: 2, name: "alshoja", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4b46594245404b6a4d474b434604494547">[email protected]</a>", email_verified_at: null, type: "admin"},
{id: 3, name: "Ellaware", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6706050f0e27000a060e0b4904080a">[email protected]</a>", email_verified_at: null, type: "user"},
{id: 17, name: "alshoja", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="721132155c111d1f">[email protected]</a>", email_verified_at: null, type: "user"}
]
Desired Output:
[
{id: 2, name: "alshoja", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98f9f4ebf0f7f2f9d8fff5f9f1f4b6fbf7f5">[email protected]</a>", email_verified_at: null, type: "admin"},
{id: 3, name: "Ellaware", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="38595a5051785f55595154165b5755">[email protected]</a>", email_verified_at: null, type: "user"},
]