1

Есть сервер на который посылается запрос и возвращается 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>

1 ответ 1

1

Также как и проекты. У вас массив, используйте *ngFor

<ul>
  <li *ngFor="let project of projects">
    <p>{{project?.title}}</p>
    <div *ngFor="let todo of project.items">{{todo.title}}</div>
  </li>
</ul>
11
  • Я не знаю почему, ошибок не дает, но ничего не выводит. 5 июл 2021 в 8:07
  • а с сервера todos точно приходит?
    – Komdosh
    5 июл 2021 в 8:10
  • и он приходит в том виде, который вы описали? С пустыми объектами? или это просто плейсхолдер, чтобы показать, что там много элементов?
    – Komdosh
    5 июл 2021 в 8:12
  • да, но в классе он прописан как items, я это учла 5 июл 2021 в 8:12
  • там не пусто, просто показать что их много 5 июл 2021 в 8:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.