Angularjs Таблица данных с помощью JSON

Question

Мои два JSON массивы,

$scope.myHospital = [ 
    {"id":"1","name":"hos1"}, 
    {"id":"2","name":"hos2"}, 
    {"id":"3","name":"hos3"}, 
    {"id":"4","name":"hos4"}, 
    {"id":"5","name":"hos5"} 
]; 

другой является

$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"} 
     ] 
     }] 
    }    
    ]; 

этими Я хочу, чтобы таблица, как этот

Я попробовал его ng- повторяю до сих пор мне удается генерировать таблицу здесь в plnkr Теперь я придерживался логики значений null, сопоставляя Hospita l id. Вставка значений null вручную в JSON не будет работать для меня, потому что я получаю этот JSON из бэкэнд. Но я могу попросить их изменить структуру JSON (формат массива), если это необходимо.

Answer 1

Попробуйте умный стол. https://github.com/lorenzofox3/Smart-Table

Наша подготовка данных перед ng-repeat в соответствии с вашими потребностями.

Answer 2

не точное решение, но может быть полезно ..

<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

Здесь работает code.

Я тоже немного изменил ваш источник данных, который легко рассмотреть и сделать и в HTML тоже.

В вашей plunker вы показывали неправильное значение, соответствующие госпитали, когда присутствует в "hospital" объекте в $scope.data несколько записей .Чтобы выпрямить, что я добавил нулевые объекты тоже так ng-repeat будет проходить указательную для Comparision для отображения В 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} 
     ] 
     }] 
    }    
    ]; 

в вашем 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

Вы можете изменить структуру JSON после получения его для того, чтобы сделать его визуализации в пользовательском интерфейсе. Что-то вроде этого,

angular.forEach($scope.data[0].procedure, function(pro) { 
    var arr = []; 
    angular.forEach(pro.hospital, function(hos) { 
    arr[hos.id] = hos.price 
    }); 
    pro.hospital = arr; 
}); 

Теперь ваш массив больниц, имеющий меньшие значения, будет выглядеть следующим образом. Если вы заметили, я изменил структуру из массива объектов в массив строк, имеющих цены с ключами, обозначающих номер больницы ..

hospital: [ 
    2: "469", 
    3: "429", 
    5: "319" 
] 

Наконец, вы можете иметь свою логику рендеринга, как следующие за обнимая это изменение,

<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