Javascript Can'；t从json填充html表

请帮助我根据json响应填写表格：

[
  {
    "id": 1,
    "firstName": "James",
    "nickNames": [
      {}
    ]
  },
  {
    "id": 2,
    "firstName": "Linda",
    "nickNames": [
      {
        "id": 2,
        "name": "lin"
      },
      {
        "id": 3,
        "name": "l1n"
      },
      {
        "id": 1,
        "name": "Lin"
      }
    ]
  }
]

我试着这样填写表格：

<table id="users" class="table table-striped table-hover">
  <thead>
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Nicknames</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>James</td>
    <td>none</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Linda</td>
    <td>lin, l1n, Lin</td>
  </tr>
  </tbody>
</table>

这是我的模板：

<div class="row">
  <div class="page-header">
    <h1>Users</h1>
  </div>
  <table class="table table-striped table-hover">
    <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Nicknames</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="user in users | orderBy:'id' track by user.id">
      <td>{{ user.id }}</td>
      <td>{{ user.firstName }}</td>
      <td ng-repeat="nickname in user.nickNames | emptyUser">{{ nickname.name }}</td>
    </tr>
    </tbody>
  </table>
</div>

使用者
#
名称
绰号
{{user.id}
{{user.firstName}
{{昵称.name}

嵌套数组的问题是我无法将条目拆分为一个

标记

p、 我无法更改服务器的api

---

我在StackOverflow上看到了类似的问题，但它们与我的问题不同。

不要在

td

标签上重复-在

td

中使用

span

：

<td><span ng-repeat="nickname in user.nickNames | emptyUser">{{ nickname.name }} </span></td>

{{昵称.name}

请参见此处：

#
名称
绰号
{{user.id}
{{user.firstName}
{{{nickname.name}

---

谢谢，但一行中的数据看起来更好。当然，这取决于您是否想要一行，或者不只是使用其他标记，然后使用td

<td><span ng-repeat="nickname in user.nickNames | emptyUser">{{ nickname.name }} </span></td>

  <table class="table table-striped table-hover">
    <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Nicknames</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="user in data | orderBy:'id' track by user.id">
      <td>{{ user.id }}</td>
      <td>{{ user.firstName }}</td>
      <td><p ng-repeat="nickname in user.nickNames | emptyUser ">{{ nickname.name }}</p></td>
    </tr>
    </tbody>