Can you assist me in populating a table using data from a JSON response?
[
{
"id": 1,
"firstName": "James",
"nickNames": [
{}
]
},
{
"id": 2,
"firstName": "Linda",
"nickNames": [
{
"id": 2,
"name": "lin"
},
{
"id": 3,
"name": "l1n"
},
{
"id": 1,
"name": "Lin"
}
]
}
]
I want to populate the table as follows:
<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>
Here is what I have done so far:
'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)
}
)
}]);
This is my template:
<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>
My issue lies in the fact that with the nested array, I am unable to separate entries into individual <td> tags.
p.s. I am unable to modify the API provided by the server.
I have searched for similar problems on StackOverflow, but none seem to address my specific issue.