javascript - Using Lo-Dash to give sum from REST return in AngularJS Application -

scroll down solution !!

i have simple angularjs application (with lodash loaded after angular.js, before app.js) :

• project list page(/projects), link on item brings /projects/:id
• in /projects/:id, controller request api, , returns data
• i assign data $scope.project, , display in view

here's example of return i'm getting api :

{      "_id" : { "$oid" : "546a3bdee4b0bfd97138fe08"} ,      "picture" : "http://placehold.it/400x400" ,      "name" : "square campus" ,       "address" : "293 grafton street, shasta, arizona, 6757" ,      "phone" : "+1 (916) 544-2274" ,      "buildings" : [          { "name" : "north campus" , "floors" : "4" , "users" : "8"} ,          { "name" : "south campus" , "floors" : "2" , "users" : "15"} ,          { "name" : "east wing" , "floors" : "8" , "users" : "23"}     ] }  // using call in controller $scope.project = restangular.one('projects', $routeparams.projectid).get().$object; 

and here's how display in view :

        <aside class="aside-primary col-xs-12 col-md-3">             <div class="well">                 <img ng-src="{{project.picture}}" alt="" class="img-responsive"/>                 <strong>{{project.name}}</strong><br />                 {{project.address}}<br />                 {{project.phone}}<br />             </div>         </aside>          <section class="primary-content col-xs-12 col-md-9">             <h1>{{project.name}}</h1>              <h2>buildings</h2>             <table class="table table-hover table-bordered">                 <thead>                     <tr>                         <th>name</th>                         <th>floors</th>                         <th>users</th>                     </tr>                 </thead>                 <tbody>                     <tr data-ng-repeat="building in project.buildings">                         <td>{{building.name}}</td>                         <td>{{building.floors}}</td>                         <td>{{building.users}}</td>                     </tr>                     <tr>                         <td><strong>total</strong></td>                         <td></td>                         <td></td>                     </tr>                 </tbody>             </table>          </section> 

now, here's want :

i'm new lo-dash (and js development not strongest asset) , use calculate sums. in case, sum of total number of floors , users.

problem is, don't know how convert object i'm receiving kind of array :

// floors example var sum = _.reduce([4, 2, 8], function(sum, num) {     return sum + num; }); console.log(sum); 

can me figure out?

thank !

solution

it important when make restangular call, define "then" promise because data isn't loaded @ first on initial pageload.

    var detailproject = restangular.one('projects', $routeparams.projectid);     detailproject.get().then(function (project) {         $scope.project = project;    // assign owner model          var sums = _.reduce(project.buildings,           function (sums, building) {               return {                   floors: sums.floors + parseint(building.floors),                   users: sums.users + parseint(building.users)               };           },           { floors: 0, users: 0 } // initial values         );         console.log(sums);     }); 

if want calculate floors , users @ same time, instead of iterating on data twice, can this:

var sums = _.reduce( $scope.project.buildings,   function(sums, building) {     return { floors: sums.floors + parseint(building.floors),              users:  sums.users + parseint(building.users) };   },   { floors: 0, users: 0 } // initial values );  console.log(sums); // => { floors: 14, //      users: 46 } 

you assign property on $scope.project object, in order display in view:

$scope.project.buildingtotals = _.reduce( $scope.project.buildings, // ... 

...then...

<tr>     <td><strong>total</strong></td>     <td>{{project.buildingtotals.floors}}</td>     <td>{{project.buildingtotals.users}}</td> </tr>