Harsh sachdev Harsh sachdev - 1 month ago 9
HTML Question

table with json data from angularjs

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
enter image description here

Answer

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