0

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

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.

Improve this question
2
  • what do you mean by null ? Do you wan to display NULL when there is no record ? Commented Oct 22, 2016 at 11:38
  • Yes, exactly for example "pro3" don't have any value for hospital id 2 & 4. so for hospital 2 & 4 I want to show NULL. Same as the image which I posted in the question. Commented Oct 22, 2016 at 12:04

4 Answers 4

Reset to default
0

Try smart table. https://github.com/lorenzofox3/Smart-Table

Our prepare your data before ng-repeat to fit your needs.

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

Comments

0

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>
Improve this answer

1 Comment

Thanks @Develop tech's web developer But I still needed much more. :(
0

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>
Improve this answer

4 Comments

Thanks for your answer & I appreciate your work .But unfortunately, I am getting this JSON from backend So I won't change it by hard coded like insert null value manually. But is there any programmatical way to insert null values in my JSON like by for each loop or something similar. BUT If we are able to achieve this programmatically than there is still a problem of SORTING of record because ng-repeat will pick records in sequence. I hope you will understand what I am trying to convey.
I am trying to achieve this using "ng-if". Calling a function in ng-if with some parameters like both the id and procedure name AND inside the function I am trying to build the logic for match id for a particular "procedure" and return the PRICE for that "Hospital".
I don't see why there would be any problem in sorting if we have an object with I'd and price as null .In btw yes you can write a for loop in js and get the required data source easily ! Do you want me to write ? It would be easy in back end if you want to do this.
YES, Sure if we follow this approach than we have to do two operations first we have to add null values for non-present id in hospital object. then we have to sort hospital object according to id. IF this is possible then please provide the code for this. it would be more helpful
0

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

Improve this answer

1 Comment

Thanks for your answer. I am working on it and I will let you know once I will finish with this. I need to do some changes like my hospital id is mongo generated 24 character id.But I think the for-each loop will help to achieve the goal. Thanks again :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.