Angularjs Table using JSON data - html

Question

My two JSON arrays are,
$scope.myHospital = [
{"id":"1","name":"hos1"},
{"id":"2","name":"hos2"},
{"id":"3","name":"hos3"},
{"id":"4","name":"hos4"},
{"id":"5","name":"hos5"}
];
another one is
$scope.data = [
{
"category":"first category",
"procedure":[{
"name":"pro1",
"hospital": [
{"id":"1","price":"1101"},
{"id":"2","price":"1102"},
{"id":"3","price":"1103"},
{"id":"4","price":"1104"},
{"id":"5","price":"1105"}
]
}, {
"name":"pro2",
"hospital": [
{"id":"1","price":"1201"},
{"id":"2","price":"1202"},
{"id":"3","price":"1203"},
{"id":"4","price":"1204"},
{"id":"5","price":"1205"}
]
}, {
"name":"pro3",
"hospital": [
{"id":"1","price":"1301"},
{"id":"3","price":"1303"},
{"id":"5","price":"1305"}
]
}]
},
{
"category":"Second category",
"procedure":[{
"name":"pro4",
"hospital": [
{"id":"1","price":"2101"},
{"id":"2","price":"2102"},
{"id":"3","price":"2103"},
{"id":"4","price":"2104"},
{"id":"5","price":"2105"}
]
}, {
"name":"pro5",
"hospital": [
{"id":"1","price":"2201"},
{"id":"2","price":"2202"},
{"id":"4","price":"2204"}
]
}]
}
];
BY these I want a table like this
I tried it by ng-repeat till now I manage to generate the table here in plnkr
Now I stuck on the logic of null values by matching the hospital id. Inserting null values manually in JSON will not work for me because I am getting this JSON from backend. But I can ask them to change JSON structure(format of array) if needed.

Answer 1

Try smart table. https://github.com/lorenzofox3/Smart-Table
Our prepare your data before ng-repeat to fit your needs.

Answer 2

Not The Exact Solution But May Be Helpful..
<table border="2">
<tbody ng-repeat="cat in data">
<tr>
<td>{{cat.category}}</td>
</tr>
<tr ng-repeat="procedure in cat.procedure">
<td>{{procedure.name}}</td>
<td ng-repeat="hospital in procedure.hospital">{{hospital.price}}</td>
</tr>
</tbody>

Answer 3

Here is the working code.
I have made a bit of changes in your data source too which is easy to consider and make and in HTML too.
In your plunker you were displaying wrong value corresponding to the hospitals when there are few records present in "hospital" object in $scope.data.To rectify that I have added null objects too so the ng-repeat will pass right index for comparision to display
In JS
$scope.data = [
{
"category":"first category",
"procedure":[{
"name":"pro1",
"hospital": [
{"id":"1","price":"1101"},
{"id":"2","price":"1102"},
{"id":"3","price":"1103"},
{"id":"4","price":"1104"},
{"id":"5","price":"1105"}
]
}, {
"name":"pro2",
"hospital": [
{"id":"1","price":"1201"},
{"id":"2","price":"1202"},
{"id":"3","price":"1203"},
{"id":"4","price":"1204"},
{"id":"5","price":"1205"}
]
}, {
"name":"pro3",
"hospital": [
{"id":"1","price":"1301"},
{"id":"2","price":null}, // add null objects for considering right index in display...
{"id":"3","price":"1303"},
{"id":"4","price":null},
{"id":"5","price":"1305"}
]
}]
},
{
"category":"Second category",
"procedure":[{
"name":"pro4",
"hospital": [
{"id":"1","price":"2101"},
{"id":"2","price":"2102"},
{"id":"3","price":"2103"},
{"id":"4","price":"2104"},
{"id":"5","price":"2105"}
]
}, {
"name":"pro5",
"hospital": [
{"id":"1","price":"2201"},
{"id":"2","price":"2202"},
{"id":"3","price":null},
{"id":"4","price":"2204"},
{"id":"5","price":null}
]
}]
}
];
In your HTML
<tr ng-repeat="(index, hos) in myHospital">
<td width="100px">{{hos.name}}</td>
<td width="100px" ng-repeat="pro in d.procedure">
<p ng-show="pro.hospital[index].id == index+1">{{ pro.hospital[index].price }}</p>
<p ng-hide="pro.hospital[index].id == index+1 && pro.hospital[index].price">NULL</p>
</td>
</tr>

Answer 4

You can change the JSON structure after receiving it in order to make it renderable on UI. Something like this,
angular.forEach($scope.data[0].procedure, function(pro) {
var arr = [];
angular.forEach(pro.hospital, function(hos) {
arr[hos.id] = hos.price
});
pro.hospital = arr;
});
Now your hospital array that has lesser values would look like following. If you notice, I changed the structure from array of objects to an array of strings having prices with keys denoting the hospital number..
hospital: [
2: "469",
3: "429",
5: "319"
]
Finally, you can have your rendering logic like following for embracing this change,
<tr ng-repeat="(index, hos) in myHospital">
<td ng-bind="hos.name"></td>
<td ng-repeat="pro in data[0].procedure">
<span ng-bind="pro.hospital[index+1]"></span>
<span ng-if="!pro.hospital[index+1]">NULL</span> <!--Optional-->
</td>
</tr>
DEMO