Iterate through nested json array in angular controller and get unique values - arrays

Question

I need to iterate through nested json array which looks like that
[
{
"title": "EPAM",
"technologies": [
"PHP",
".net",
"Java",
"Mobile",
"Objective-C",
"Python",
"Ruby"
],
"location": "Belarus",
"city": "Minsk"
},
{
"title": "Parallels",
"technologies": [
"PHP",
"Java",
"C++",
"iOS Development",
"C#",
"Ember.js"
],
"location": "Russia",
"city": "Moscow"
}
]
What I want is to iterate through list of technologies in each company and then return a list of unique values. I failed, however, to access a single company in company arrays in the controller. It looks like this so far
var app = angular.module('app', []);
app.controller('CompaniesController', ['$scope', '$http',
function($scope, $http) {
$http.get('json/companies.json').success(function(data) {
$scope.companies = data; // get data from json
$scope.techStack = []
$scope.companies = data.query(function(companies) {
console.log(companies); //I expected to see data here
});
});
}
]);
Apparently I'm doing something wrong.

Answer 1

Use angular's forEach:
var app = angular.module('app', []);
app.controller('CompaniesController', ['$scope', '$http',
function($scope, $http) {
$http.get('json/companies.json').success(function(data) {
$scope.companies = data; // get data from json
angular.forEach($scope.companies, function(item){
console.log(item.technologies);
})
});
});
}
]);

Answer 2

If you need only to display nested array on UI, you can do that straight in view
e.g.
<tr ng-repeat="i in Items">
<td valign="top">{{i.Value}}</td>
<td valign="top">
<table>
<tr ng-repeat="c in i.Children">
<td>{{c.Value}}</td>
</tr>
</table>
</td>
</tr>

Answer 3

In order to loop through array in AngularJS, you can simply use angular.forEach. For example,
angular.forEach(companiesList, function(company) {
//Here you can access each company.
});
I have made a simple demo based on your code that list "Companies" and unique "Technologies".
DEMO

Answer 4

try this
var app = angular.module('app', []);
app.controller('CompaniesController', ['$scope', '$http',
function($scope, $http) {
$http.get('json/companies.json').success(function(data) {
$scope.companies = data; // get data from json
$scope.techStack = []
angular.forEach($scope.companies, function(item){
$scope.techStack = item.technologies;
var uniqueTech = [];
for (var i = 0; i < $scope.techStack.length; i++)
{
if (uniqueTech.indexOf($scope.techStack[i]) == -1)
uniqueTech.push($scope.techStack[i]);
}
console.log("Unique Technologies : " + uniqueTech);
})
});
}
]);

Answer 5

user angular's foreach function for looping through data.