получение поста от api angularjs

Question

У меня есть JSON, и я пытаюсь получить объект формы.

{
  "userId": 123,
  "formId": "VC01",
  "form": [
    {
      "id": "F01",
      "caption": "Sighting",
      "type": "date"
    },
    {
      "id": "F02",
      "caption": "Ship Name",
      "type": "text"
    },
    {
      "id": "F03",
      "caption": "Aliens Count",
      "type": "number"
    },
    {
      "id": "F04",
      "caption": "Friendliness",
      "type": "number"
    },
    {
      "id": "F05",
      "caption": "Smartness",
      "type": "number"
    },
    {
      "id": "F06",
      "caption": "Description",
      "type": "text"
    }
  ],
  "lastChangedDate": "2017-10-30T17:23:43+00:00",
  "lastChangedBy": "Paddy"
}

У меня есть data.service.ts с извлечением HTTP с

getPosts() {
  return this.http.get('http://www.mocky.io/v2/59f7760a2f0000ab1d55864e')
    .pipe(map(res => res.json()));
}

и в контроллере user.component.ts

export class UserComponent implements OnInit {
  posts: Post[];
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.dataService.getPosts().subscribe((posts) => {
      console.log(posts.form);
      this.posts = posts;
      this.posts = posts.form;
    });
  }
}
interface Post {
  userId: number,
  formId: string,
  form: any,
  id: any,
  caption: string,
  type: string,
  lastChangedDate: any,
  lastChangedBy: string
}

на user.component.html

<table>
  <tr>
    <th>id</th>
    <th>caption</th>
    <th>type</th>
  </tr>
  <tr *ngFor="let post of posts">
    <td>{{post.id}}</td>
  </tr>
</table>

Как я могу получить идентификатор , подпись и тип в таблицу?

Answer 1

Я предполагаю, что у вас уже есть объект формы, хранящийся в this.posts, то есть:

this.posts = posts;
this.posts = posts.form;

Теперь просто переберите массив, чтобы получить id, caption и type:

<table class="table">
<thead>
<th>id</th>
<th>caption</th>
<th>type</th>
</thead>
<tbody>
<tr *ngFor="let post of posts">
    <td>{{post.id}}</td>
    <td>{{post.caption}}</td>
    <td>{{post.type}}</td>
</tr>
</tbody>