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

Question

I need to iterate through nested json array which looks like that

[
  {
    \"title\": \"EPAM\",
    \"technologies\": [
        \"PHP\",
        \".net\",
          


        

Answer 1

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 2

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

user angular's foreach function for looping through data.

Answer 5

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>