Есть сервер на который посылается запрос и возвращается JSON файл такой структуры:
[{
"id":1
"title": "Title",
"created_at": "zzz",
"updated_at": "zzz",
"todos": [
{"id":1
"title": "Title",
"created_at": "zzz",
"updated_at": "zzz"},
{}]},{}]
Файл http.service.ts
import {Observable} from 'rxjs';
import { map } from 'rxjs/operators';
import {project} from "./todos";
@Injectable()
export class HttpService{
constructor(private http: HttpClient){ }
getData(): Observable<project[]>{
return this.http.get('url').pipe(map((data:any)=>{
let projectList = data["projects"];
return projectList.map(function(prj: any): project {
return new project(prj.id, prj.title, prj.todo);
});
}));
}
}
Классы для обработки json
interface todo {
id: number;
project_id: number;
title: string;
is_completed: boolean;
}
export class project {
constructor(public id: number, public title: string,public items: todo[]){}
}
И сам компонент
export class AppComponent {
projects: project []=[];
constructor(private httpService: HttpService){}
ngOnInit(){
this.httpService.getData().subscribe((data: project[]) => this.projects=data);
}
}
Если я все делаю верно, как мне в html вывести todo? С выводом project нет проблем:
<ul>
<li *ngFor="let project of projects">
<p>{{project?.title}}</p>
</li>
</ul>