Show nested data from JSON in table angular - arrays

Question

I am trying to show nested data from JSON in a table but not getting succeeded.
My json data:-
$scope.data = [
{
"$id": "1",
"Folder": [
{
"Name": "Windows-Desktop",
"CPU": "2",
"RAM": 2,
"FolderName": "Folder-28"
},
{
"Name": "Desktop",
"CPU": "1",
"RAM": 1,
"FolderName": "Folder-11"
}
]
}
]
I tried this in controller:-
$scope.Folder = [];
angular.forEach($scope.data.Folder, function(choose) {
$scope.Folder.push(choose);
}
In view I did this
<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>
I am not getting any output in this. Where am I going wrong?

Answer 1

You are accessing $scope.data.Folder which is not correct because $scope.data is an Array.
First try to loop on $scope.data and then a loop on 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 2

In your controller do like this:
$scope.Folder = [];
angular.forEach($scope.data, function(choose) {
if(choose && choose.Folder){
$scope.Folder.push(choose.Folder);
}
})

Answer 3

You need to use $scope.data[0].Folder in your controller as $scope.data is a array type. And I am not sure how you are rendering your table but as the question is only related to getting the value in $scope.Folder this is your solution.
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>
Here is one more example that I think is something you are expecting
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

You can try the following
<div ng-repeat="item in data">
<div ng-repeat="g in item.Folder">
Name:{{g.Name}}-
Cpu:{{g.CPU}}-
Ram:{{g.RAM}}
</div>
</div>
using above method would eliminate the need of preparing data in your controller
Demo
Table Demo

Answer 5

All you need to do is update your iterator function
from
angular.forEach($scope.data.Folder, function(choose)
to
angular.forEach($scope.data[0].Folder, function(choose)
look at your json Folder is first element....