how to repeat the rows for the key of key value - html

Question

I received the json data in AngularJs and want to display the particular value of json data in table using ng-repeat.
json data:
{
"15":{
"Unique number":"133077",
"Designation":"Software Engineer",
},
"16":{
"Unique number":"133079",
"Designation":"Senior Software Engineer",
},
"18":{
"Unique number":"143688",
"Designation":"Senior Software Engineer",
}
}
I want to display in table like this using HTML:
| uniq no | designation |
| 133077 | Software Engineer |
| 133079 | Senior Software Engineer |
| 143688 | Senior Software Engineer |
Any help please.
Thanks in advance.

Answer 1

angular.module('app',[]).controller('myCtrl', function($scope){
$scope.members = {
"15":{
"Unique number":"133077",
"Designation":"Software Engineer",
},
"16":{
"Unique number":"133079",
"Designation":"Senior Software Engineer",
},
"18":{
"Unique number":"143688",
"Designation":"Senior Software Engineer",
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<table>
<thead>
<th>SI.NO</th>
<th>Unique number</th>
<th>Designation</th>
</thead>
<tbody>
<tr ng-repeat="member in members">
<td>{{$index + 1}}</td>
<td>{{member['Unique number']}}</td>
<td>{{member.Designation}}</td>
</tr>
</tbody>
</table>
</div>

Answer 2

EDIT : OP changed the requirement to add an extra field to display serial number.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = {"15":{
"Unique number":"133077", "Designation":"Software Engineer", },
"16":{
"Unique number":"133079", "Designation":"Senior Software Engineer", },
"18":{
"Unique number":"143688", "Designation":"Senior Software Engineer", }
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="myCtrl">
<table class="table table-bordered table-striped">
<thead>
<th>Sl. No.</th>
<th>Unique number</th>
<th>Designation</th>
</thead>
<tr ng-repeat='(key, value) in data'>
<td>
{{$index + 1}}
</td>
<td>
{{value["Unique number"]}}
</td>
<td>
{{value["Designation"]}}
</td>
</tr>
</table>
</div>

Answer 3

My solution base on new components architecture simple for understand:
(function() {
'use strict';
// app.js
angular
.module('app', [])
.component('myApp', {
template: '<items-table items="$ctrl.items"></items-table>',
bindings: {},
controller: function() {
this.items = {
"15": {
"Designation": "Software Engineer",
"Unique number": "133077"
},
"16": {
"Designation": "Senior Software Engineer",
"Unique number": "133079"
},
"18": {
"Designation": "Senior Software Engineer",
"Unique number": "143688"
}
};
}
});
const itemsTableTemplate = `
<div class="items">
<h2>Items</h2>
<table>
<thead>
<tr>
<th>unique no</th>
<th>designation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(id, item) in $ctrl.items track by id">
<td ng-bind="item['Unique number']"></td>
<td ng-bind="item['Designation']"></td>
</tr>
</tbody>
</table>
</div>
`;
// items-table.component.js
angular
.module('app')
.component('itemsTable', {
template: itemsTableTemplate,
bindings: {
items: '<'
},
controller: ItemsTableController,
controllerAs: '$ctrl'
});
function ItemsTableController() {
// Constructor
}
angular.bootstrap(document.getElementById('app'), ['app'], {
strictDi: true
})
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div id="app">
<my-app>
Loading...
</my-app>
</div>