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

$scope.myHospital and $scope.data dosent have common key to map.So how would you decide which price should go for which hospital? — ngCoder
– ngCoder, Commented Oct 22, 2016 at 5:52
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
– Harsh sachdev, Commented Oct 22, 2016 at 5:59
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"} ] }, — Harsh sachdev
– Harsh sachdev, Commented Oct 22, 2016 at 6:02
yea that will do I guess ! can you post that changed JSON data in question I will come up with answer — ngCoder
– ngCoder, Commented Oct 22, 2016 at 6:03
@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. — tanmay
– tanmay, Commented Oct 22, 2016 at 6:05

tanmay · Accepted Answer · 2016-10-22 06:08:21Z

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

answered Oct 22, 2016 at 6:08

tanmay

7,9112 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Harsh sachdev Over a year ago

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 Over a year ago

For "pro3" i want null value for hospital 1 & 4 because they don't have any price.

tanmay Over a year ago

@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 Over a year ago

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 Over a year ago

Or somehow can I achieve this by matching the id's of hospitals ?

|

Collectives™ on Stack Overflow

table with json data from angularjs

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related