Angular 8 - problem with GET request for a json file - django

Question

Please help, i'm trying to lift up my django web page with REST API and use Angular FrontEnd where I am beginning. I have followed some tutorials on how to consume REST api and somehow I'm making a mistake there. The browser shows no errors when requesting the content but it is not coming. I appreciate every bit of help.....
here we go usluga-list.component.ts:
import { Component, OnInit } from '#angular/core';
import { Observable } from "rxjs";
import { Usluga } from "../models/usluga";
import { UslugaService } from "../services/usluga.service";
#Component({
selector: 'app-usluga-list',
templateUrl: './usluga-list.component.html',
styleUrls: ['./usluga-list.component.css']
})
export class UslugaListComponent implements OnInit {
uslugi: Observable<Usluga[]>;
constructor(private uslugaService: UslugaService) { }
ngOnInit() {
this.loadUslugiData();
}
loadUslugiData(){
this.uslugi = this.uslugaService.getAllUslugi();
then i have usluga.service.ts:
import { Injectable } from '#angular/core';
import { HttpClient } from "#angular/common/http";
import { Observable } from "rxjs";
import { Usluga } from "../models/usluga";
#Injectable({
providedIn: 'root'
})
export class UslugaService {
private endpoint ='http://localhost:8000/uslugi/';
constructor(private http: HttpClient) { }
getAllUslugi(): Observable<any>{
return this.http.get(this.endpoint)
}
getUsluga(id: number): Observable<any> {
return this.http.get(this.endpoint + id);
}
}
Then I have app-routing.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { UslugaListComponent } from './usluga-list/usluga-list.component';
const routes: Routes = [
{path: '', redirectTo: 'uslugi', pathMatch: 'full'},
{path: 'uslugi', component: UslugaListComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
It is odd as i get the json via localhost:8000/uslugi and it must be something wrong in the Angular:
[{"id": 1, "title": "Wizyta", "text": "Wizyta", "price": "10.99", "slug": "wizyta-p", "category": "psyc", "lekarz_id": 1}, {"id": 2, "title": "Wizyta d", "text": "Wizyta dia to...", "price": "199.30", "slug": "wiz", "category": "sek", "lekarz_id": 1}]

Answer 1

In order for the http call to be made you need to subscribe to it.
In your component:
this.uslugi = this.uslugaService.getAllUslugi();
// if you just want to test that it works:
this.uslugi.subscribe();
The proper way is to unsubscribe, there are many ways of doing this. This is one way that only require 'rxjs' and operators. So what you do is essentially like this:
#Component({
selector: 'app-usluga-list',
templateUrl: './usluga-list.component.html',
styleUrls: ['./usluga-list.component.css']
})
export class UslugaListComponent implements OnInit, OnDestroy {
uslugi: Observable<Usluga[]>;
unsubscribe = new Subject();
constructor(private uslugaService: UslugaService) { }
ngOnInit() {
this.loadUslugiData();
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
loadUslugiData(){
this.uslugi = this.uslugaService.getAllUslugi();
this.uslugi.pipe(takeUntil(this.unsubscribe)).subscribe();
}
Then that should make the http call for you

Answer 2

The observable variable (that stores the object from the api) name must be the same as the name in the html template, alike (flightss):
#Component({
selector: 'app-flight-list',
templateUrl: './usluga-list.component.html',
styleUrls: ['./usluga-list.component.css']
})
export class UslugaListComponent implements OnInit {
flightss: Observable<Usluga[]>;
constructor(private uslugaService: UslugaService) { }
ngOnInit() {
this.loadUslugisData();
}
loadUslugisData() {
this.flightss = this.uslugaService.getAllUslugi();
}
}
and in the template:
<tr *ngFor="let flight of flightss | async; let i=index">
<td class="text-center">{{flight.id}}</td>
<td>{{flight.title}}</td>
<td>{{flight.text}}</td>
<td>{{flight.price}}</td>
<td>{{flight.slug}}</td>
<td>{{flight.category}}</td>
<td class="td-actions text-right">
<a type="button" class="btn btn-success btn-just-icon btn-sm "
style="margin-left:10px;">
<i class="material-icons">Edit</i>
</a>
<button type="button" rel="tooltip" class="btn btn-danger btn-just-icon btn-sm" data-original-title="" title="" style="margin-left:10px;">
<i class="material-icons">Delete</i>
</button>
</td>
</tr>