Web API not being called from angular

Question

I'm trying to call custom API in angular but for some reason it doesn't call it. Before this I made 10 functions in angular (in _api.service.ts) that call web API in the same way and they are correct, my web API is called and data is returned, everything is good. Then I made one more method in web API and one more component in angular (function getList() is called in it), and it didn't work, API is never called.

getList(id: string, chosen: string): Observable<StopListModel[]> {
        let myUrl: string = API_URL + '/stop/list';
        myUrl += '/' + id;
        myUrl += '/' + chosen;
        //debugger goes to this line, url is correct but API not called
        return this.http.get<StopListModel[]>(myUrl, this.httpUtils.getHTTPHeader());
   }

When I was debugging I saw that url for API is correctly sent from angular, like in 10 other functions that successfully call API in my project, so I think I don't need to send you code from my web API. I was confused so I moved line that is calling the getList() from new component to existing component, where I already know my _api.service will successfully call web API because in that component there is a function (for example getUsers() ) that correctly calls API. And it didn't work, API is not called for getList().

I assumed there is something wrong with web API for getList(), but just to be sure in that second component I called another _api.service function (that works when called from another component), and surprisingly - API was not called for that function either.

Then I saw what I think the problem is: when I try to call any function in any of my components, all this "new" functions never call API, just the old ones that have already been there, even though they correctly work in their own components.

export class DetaljiStopoviComponent{
            stops$: Observable<StopStatisticsModel[]>;
            list$: Observable<StopListModel[]>
            constructor(
              private apiService: APIService,
              route: ActivatedRoute
            ) {
                var id = route.snapshot.params['id'];
                this.stops$ = this.apiService.getStopStatistics(id); //this works, it was there before - but any other calling I add under this, API is not called (this is the case for every component, every function)
                this.list$ = this.apiService.getList(id, '3'); //this is the newest one, I can't make it call API even in the empty components      
            }
}

I am so confused and not experienced in angular, I'm very courious what the problem is. I don't think something is wrong with web API, but I'm not sure. Does anyone have suggestion?

In Component, you are calling apiService.getStopList, but you attach getList() code. Is it the same method? — Yong Shun
– Yong Shun, Commented Sep 10, 2021 at 9:35
Sorry, when editing code to post here (so the names were more understandable), I accidentally left "Stop". this is the same method, just ignore this Stop — 5ra
– 5ra, Commented Sep 10, 2021 at 9:38
If you place a debugger in getList, does it get called? Do you see a call to the URL you want to request? — Akxe
– Akxe, Commented Sep 10, 2021 at 9:43
yes, debugger goes all the way to return this.http.get..... and url is correct. I know url is correct because when I put it in postman I get correct results back — 5ra
– 5ra, Commented Sep 10, 2021 at 10:00

user11423673 · Accepted Answer · 2021-09-10 10:11:09Z

2

I believe it is a syntax issue, for get method try this

return this.http.get<StopListModel[]>(myUrl, {headers:this.httpUtils.getHTTPHeader()});

edited Sep 10, 2021 at 10:11

answered Sep 10, 2021 at 9:58

user11423673

411 silver badge7 bronze badges

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

Comments

Yan Koshelev · Accepted Answer · 2021-09-10 10:17:34Z

1

Looks like you are forgot to subscribe to:

this.stops$ = this.apiService.getStopStatistics(id);
this.list$ = this.apiService.getList(id, '3');

I think this.stops$ works for you because somewhere in the template you have async pipe(stops$ | async).

So try to do:

this.list$.subscribe(response => console.log(response));

after that request should sent

answered Sep 10, 2021 at 10:17

Yan Koshelev

1,1291 gold badge7 silver badges11 bronze badges

Collectives™ on Stack Overflow

Web API not being called from angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related