javascript - 无法从 json 填充 html 表

Question

请帮我从 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>

我已经做了什么:

'use strict';

angular.module('myAppControllers', [])
  .controller('UserCtrl', ['$scope', 'User', function ($scope, User) {
    User.query().$promise.then(function (data) {
        $scope.users = data;
      }, function (reason) {
        console.log('Failed: ' + reason)
      }
    )
  }]);

这是我的模板:

<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>

嵌套数组的问题我无法将条目拆分为一个 <td>标签。

附注我无法更改服务器的 api。

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

Answer 1

不要在 td 标签上重复 - 在 td 中使用 span:

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