3

Example JSON Structure

{
  "holding": [
    {
      "company": 1,
      "employee": [
        { "id": 1, "name": "John"},
        { "id": 2, "name": "Michael"},
        { "id": 3, "name": "George"}
      ]
    },
    {
      "company": 2,
      "employee": [
        { "id": 1, "name": "Madonna"},
        { "id": 2, "name": "Harry"}
      ]
    }
  ]
}

The structure above is available in the view as

{{ holding }}

Holding has 5 employees, how can I detect this in Angular? Is there a simple method? I need this possibility in the View, something like

{{ holding.length }}  // 2

What I need is (PSEUDO CODE):

{{ length of all employees in holding }} // 5

If possible: I need a view-only-solution, that doesn't modify the controller..

Controller-solutions below (answers) do work properly.

Improve this question
2
  • i think you need to do a loop in order to achieve that, i am not sure there is another way, other than using third party libraries or looping it your self. Commented Dec 16, 2015 at 15:35
  • A manager need a view with some numbers and I've no access to the controller, I know only its existing structure. So it is in big companies, you have to work miracles :) Commented Dec 17, 2015 at 8:35

2 Answers 2

Reset to default
1

Use array's Reduce function. It takes a function that's called for each element of an array, taking the result of the last iteration (I called it count, but it doesn't have to be a numeric result) and the current element (company, since each element of holding represents a company). The parameter after the function is optional, and is used to specify an initial value for count, or whatever type of element you're working with.

var totalEmployees = parentObject.holding.reduce(function(count, company){
        return +count + +company.employee.length;
    }, 0);

You didn't provide a name to the object containing holding, so I just called it parentObject.

Another benefit is that this is vanilla JS, and so can be used even when Angular isn't available.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thank you @Harris: Does it work within {{ .. }} in an Angular view ?
I haven't tried it like that, but I think it hypothetically should, since it's externally a single function call with a single end-result/return value (even though internally it calls the provided function a varied number of times). However, I would put it in a function in the controller and call that, as it makes your logic less exposed in the view, and keeps it all in once place.
And thanks @itamar. It just happened to be something I've been using a lot lately.
sorry, it does not work in this constallation in the view, but it is an elegant answer for VanilaJS..
StackOverflow wants any further comments to be in chat- chat.stackoverflow.com/rooms/98146/…
|
0

Using angular.forEach here is a simple option to produce count.

 angular.module('app', [])
.controller('myCtrl', function($scope) {
   $scope.cnt=0;
  $scope.hiArray = [];
  $scope.myarr={
  "holding": [
    {
      "company": 1,
      "employee": [
        { "id": 1, "name": "John"},
        { "id": 2, "name": "Michael"},
        { "id": 3, "name": "George"}
      ]
    },
    {
      "company": 2,
      "employee": [
        { "id": 1, "name": "Madonna"},
        { "id": 2, "name": "Harry"}
      ]
    }
  ]
};

  $scope.onClick=function(){      
    var count=0;
    var jsonObj = ($scope.myarr);
    angular.forEach(jsonObj.holding, function(key) {
     console.log(key);
     if(key.hasOwnProperty('employee')){
        count++; 
     }
   });
  alert('count of employee '+count);
    $scope.cnt=count;
  }
})

EDIT

Now access {{$scope.cnt}} from view.

Improve this answer

3 Comments

thank you, but to manage it in controller is not my problem. It should be executable in the view like {{ tell_me_the_size_of_all_employees }}, without clicks and if possible without calling a function in controller.
this is an example to achieve..you take the idea and apply what you like.I have edited how you access in view
Is it not possible to manage it without modifying the controller?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.