CODEWITHSUNDEEP
angularapirestloops
Levente
Levente

Reputation: 25

Angular: How to make an rest-Api response observable

I'm kind of in a pickle. I need to make a dropdown list, from elements that are coming from an API response. Said API doesn't need to be called when the site loads, as such part isn't used always, in fact hardly ever, so i coded it on a button onClick event. Furthermore API response doesn't necessarily contain all elements on backend (all data is like 150 megabytes and 50k "partner"). So for now, it's coded to get 10. It's a proof of concept for a starter project. I want to iterate through it like this:

<select data-live-search="true">
<option *ngFor="let partner of partners$ | async" [value]="partner.name"> </option>
</select>

Here partners$ is an array of Partner.

partners$!: Partner[];

Partner is a class that has ~ 150 elements (or more).

Currently, said solution throws TS2769 compiler error.

From what i scoured the internet i found that i need to make it observable. (tried to make it Iterable, but didn't work out) My understanding is that i need to make a get-set etc for every single element. More problem is that Partner, can change and i'd need to redo some, or a lot of stuff. Is there a way, to dynamically make an API response observable, without me typing get-set & emitters for 2 days straight? ( I know i can generate stuff, but that'd only cut it down to a few hours)

Thanks in advance

Upvotes: 2

Views: 2381

Answers (1)

Tasos P.
Tasos P.

Reputation: 4114

First, you need to change your declaration to:


import { Observable, of } from 'rxjs';

//...

partners$: Observable<Partner[]>;

Then you need to bind this field with the remote service.

You can initially (in you component's constructor) set this:

this.partners$ = of([]); //empty array

and then call the service onClick:

this.partners$ = this.httpClient.get<Partner[]>("https://api-url");

(assuming you have injected Angular's httpClient into your component)

Upvotes: 1

Related Questions