Question

我有一个具有以下结构的json响应; https://jsonplaceholder.typicode.com/posts

I need to display the table on a attached image structure

我所做的是在下面，但它显示为用户ID重复。我需要做什么来获得我的输出结构..？

  <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
      <thead>
      <tr>
      <td>Sl No</td>
      <th>Title</th>
      <th>Body</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let record of dataString;let i=index">
      <td>{{record.userId}}</td>
      <td>{{record.title}}</td>
      <td>{{record.body}}</td>
      </tr>
      </tbody>
    </table>

Answer 1

您需要解析api结果并使用所需数据创建新对象。例如，使用数组方法执行'分组'。

示例对象可以是user - ＆gt; id：number，articles：article []

public getUsers(): User[] {
    return this.http.get(URL).map(results => {
        const users: number[] = results
            .filter((item, index, self) => self.indexOf(item.userId) === index)
            .map(item => {
                return {
                    id: item.userId,
                    articles: results.filter(result => result.userId === item.userId)
                        .map(result => {
                            return {
                                id: result.id,
                                title: result.title,
                                body: result.body
                            } as Article
                        })
                } as User
            });
    })
}

如何使用Angular在表上显示具有相同id的多个记录？

1 个答案: