在表格角度显示来自 JSON 的嵌套数据答案

【问题标题】：Show nested data from JSON in table angular在表格角度显示来自 JSON 的嵌套数据
【发布时间】：2018-10-26 04:17:48
【问题描述】：

我试图在表格中显示来自 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"
        }
        ]
}
]

我在 controller 中试过这个：-

$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>

我没有得到任何输出。我哪里错了？

【问题讨论】：

第一个错误是输入元素是自封闭标签。你必须使用 value 属性而不是像这样的内部内容：。你应该在元素上使用 ng-repeat。$scope.data 是一个数组，而字段 Forlder 是一个数组，所以你必须迭代两次。
@raffaeleambrosio 正确。现在工作谢谢。

【解决方案1】：

您正在访问 $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);
        }
     }

 }

【讨论】：

【解决方案2】：

你需要做的就是更新你的迭代器函数从 angular.forEach($scope.data.Folder, function(choose) 到 angular.forEach($scope.data[0].Folder, function(choose)

看看你的 json 文件夹是第一个元素....

【讨论】：

做了，没有变化。

【解决方案3】：

你可以试试下面的

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

使用上述方法将消除在控制器中准备数据的需要

Demo

Table Demo

【讨论】：

你怎么能在我的桌子上展示这个。我尝试将<div> 放入<td> 中，但没有成功。
为表格添加了演示

【解决方案4】：

您需要在控制器中使用$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>

【讨论】：

【解决方案5】：

在你的控制器中这样做：

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

【讨论】：