Показать вложенные данные из JSON в таблице угловых

Question

Я пытаюсь показать вложенные данные из JSON в таблице, но не получается.

Мои JSON данные: -

$scope.data = [
{
    "$id": "1",
    "Folder": [
        {
            "Name": "Windows-Desktop",
            "CPU": "2",
            "RAM": 2,
            "FolderName": "Folder-28"
        },
         {
            "Name": "Desktop",
            "CPU": "1",
            "RAM": 1,
            "FolderName": "Folder-11"
        }
        ]
}
]

Я пробовал это в контроллер : -

$scope.Folder = [];
  angular.forEach($scope.data.Folder, function(choose) {
      $scope.Folder.push(choose);
 }

В Просмотр Я сделал это

<tbody>
    <tr role="row" class="odd">
        <td class="sorting_1" ng-repeat="g in Folder">{{g.Name}}</td>
        <td>
            <div ng-repeat="g in Folder">
            <input class="form-control" type="text">{{g.CPU}}</input>
            </div>
        </td>
        <td>
            <div ng-repeat="g in Folder">
            <input class="form-control" type="text">{{g.RAM}}</input>
            </div>
        </td>
    </tr>
</tbody>

Я не получаю никакого вывода в этом. Куда я иду не так?

Answer 1

Все, что вам нужно сделать, это обновить вашу функцию итератора с angular.forEach($scope.data.Folder, function(choose) до angular.forEach($scope.data[0].Folder, function(choose)

посмотреть на ваш json Папка - это первый элемент ....

Answer 2

Вы можете попробовать следующее

<div ng-repeat="item in data">
  <div ng-repeat="g in item.Folder">
    Name:{{g.Name}}-
    Cpu:{{g.CPU}}-
    Ram:{{g.RAM}}
  </div>
</div>

, используя вышеуказанный метод, избавит от необходимости подготовки данных в вашем контроллере

Демо

Таблица Демо

Answer 3

Вам необходимо использовать $scope.data[0].Folder в вашем контроллере, так как $scope.data является типом массива. И я не уверен, как вы визуализируете свою таблицу, но поскольку вопрос связан только с получением значения в $scope.Folder, это ваше решение.

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.data = [
      {
        "$id": "1",
        "Folder": [
          {
              "Name": "Windows-Desktop",
              "CPU": "2",
              "RAM": 2,
              "FolderName": "Folder-28"
          },
           {
              "Name": "Desktop",
              "CPU": "1",
              "RAM": 1,
              "FolderName": "Folder-11"
          }
        ]
      }
    ];
    $scope.Folder = [];
      angular.forEach($scope.data[0].Folder, function(choose) {
      $scope.Folder.push(choose);
    });

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
 <tbody>
    <tr role="row" class="odd">
        <td class="sorting_1" ng-repeat="g in Folder">{{g.Name}}</td>
        <td>
            <div ng-repeat="g in Folder">
            <input class="form-control" type="text" />{{g.CPU}}
            </div>
        </td>
        <td>
            <div ng-repeat="g in Folder">
            <input class="form-control" type="text" />{{g.RAM}}
            </div>
        </td>
    </tr>
</tbody>
</div>

Вот еще один пример того, что вы ожидаете

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.data = [
      {
        "$id": "1",
        "Folder": [
          {
              "Name": "Windows-Desktop",
              "CPU": "2",
              "RAM": 2,
              "FolderName": "Folder-28"
          },
           {
              "Name": "Desktop",
              "CPU": "1",
              "RAM": 1,
              "FolderName": "Folder-11"
          }
        ]
      }
    ];
    $scope.Folder = [];
      angular.forEach($scope.data[0].Folder, function(choose) {
      $scope.Folder.push(choose);
    });

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table border='1'>
   <tr>
    <th>Name</th>
    <th>CPU</th>
    <th>RAM</th>
   </tr>
   <tr ng-repeat = "g in Folder">
    <td>{{g['Name']}}</td>
    <td>{{g['CPU']}}</td>
    <td>{{g['RAM']}}</td>
   </tr>
  </table>
</div>

Answer 4

Вы получаете доступ к $scope.data.Folder, что неверно, поскольку $scope.data является массивом.

Сначала попробуйте выполнить цикл на $scope.data, а затем цикл на Folder

$scope.Folder = [];
  angular.forEach($scope.data, function(choose) {
     if(choose && choose.Folder && choose.Folder.length) {
       angular.forEach(choose.Folder, function(choose1) {
         $scope.Folder.push(choose1);
        }
     }

 }

Answer 5

В вашем контроллере сделайте так:

$scope.Folder = [];
angular.forEach($scope.data, function(choose) {
   if(choose && choose.Folder){
       $scope.Folder.push(choose.Folder);
   }
})