table with json data from angularjs

Question

I have two json file I want to generate a dynamic table using anything like angularjs/jquery. I tried angularjs ng-repeat but not succeed.

first JSON

$scope.myHospital = [
 {"name":"hos1"}, 
 {"name":"hos2"},
 {"name":"hos3"},
 {"name":"hos4"},
 {"name":"hos5"}
];

Second JSON

$scope.data = [{
 "category":"first category",
 "procedure":[{
 "name":"pro1",
 "hospital": [
 {"price":"344"},
 {"price":"467"},
 {"price":"423"},
 {"price":"674"},
 {"price":"313"}
 ]
 }, {
 "name":"pro2",
 "hospital": [
 {"price":"234"},
 {"price":"568"},
 {"price":"136"},
 {"price":"567"},
 {"price":"666"}
 ]
 }, {
 "name":"pro3",
 "hospital": [
 {"price":"349"},
 {"price":"469"},
 {"price":"429"},
 {"price":"679"},
 {"price":"319"}
 ]
 }]
}];

And I want a table like this. Is it possible then please provide me a solution or if not then what changes required in my JSON to achieve this.Thanks expected output table

• ngCoder: $scope.myHospital and $scope.data dosent have common key to map.So how would you decide which price should go for which hospital?
• Harsh sachdev: currently, I am trying to achieve this for ideal situation like each time I have 5 hospitals and they are in sequence.If it is not sounds good than I can merge both JSON like in first JSON I can add hospital name with price.
• Harsh sachdev: like this "procedure":[ { "name":"pro1", "hospital": [ {"name":"hos1","price":"344"}, {"name":"hos2","price":"467"}, {"name":"hos3","price":"423"}, {"name":"hos4","price":"674"}, {"name":"hos5","price":"313"} ] },
• ngCoder: yea that will do I guess ! can you post that changed JSON data in question I will come up with answer
• tanmay: @Harshsachdev why do you have $scope.data as an array. Is it okay to treat it as object for now? Check my answer with that assumption.

Answer 1

You can have nested ng-repeat in order to achieve this. Assuming first hospital price maps to hos1, you can do something like this,

<table>
 <tr ng-repeat="(hosIndex, hos) in myHospital">
 <td width="100px" ng-bind="hos.name"></td>
 <td width="100px" ng-repeat="pro in data[0].procedure" 
 ng-bind="pro.hospital[hosIndex].price">
 </td>
 </tr>
</table>

DEMO

• Harsh sachdev: Thanks @tanmay. Can you please have a look at this link in this case added a field "id" because in some cases. I don't get prices for every hospital. Hope you will understand the problem please have a look at "pro3" posted link.
• Harsh sachdev: For "pro3" i want null value for hospital 1 & 4 because they don't have any price.
• tanmay: @Harshsachdev can you make that null programmatically in the JSON itself (by running angular.forEach or similar way), cause it would be kinda tough to achieve that just using ng-repeat. OR if the JSON is controlled by you, can you keep {"id": "1", "price": null} in the JSON itself?
• Harsh sachdev: actually, the JSON is not controlled by me I am getting it from backend. but I can alter it after receiving it.So how I add "price":null for the blank hospitals after receiving it.
• Harsh sachdev: Or somehow can I achieve this by matching the id's of hospitals ?