Array Handling in AngularJs

Question

I've two arrays

$scope.shops=[{"name":"x super market","id":"1","location":"India"},{"name":"y super market","id":"2","location":"India"},{"name":"z super market","id":"3","location":"India"},{"name":"a super market","id":"4","location":"India"}]

$scope.subscribedShops=[{"name":"x super market","id":"1","location":"India"},{"name":"y super market","id":"2","location":"India"},{"name":"z super market","id":"3","location":"India"}]

i want to compare these two arrays based on the IDs and display on the html view. I want to display all the shops but with a button on the ones which are matching with $scope.subscribedShops. It's been difficult for me to handle it in ng-repeat.Please help me achieve this.

Or,In controller, It'll be helpful if i can take out the objects present in $scope.shops which are not matching with $scope.subscribedShop and put them in a different array something like this.

$scope.unsubscribedShops=[{"name":"a super market","id":"4","location":"India"}]

Saurabh Ahuja · Accepted Answer · 2014-12-09 06:56:07Z

    //In UI
    <body ng-app="formExample">
      <div ng-controller="ExampleController">
      <ul>
        <li ng-repeat="shop in shops">
          {{shop.name}}
          <button ng-show="check(shop)">Subcribed</button>

        </li>

     </ul>





    //In script
    angular.module('formExample', [])
        .controller('ExampleController', ['$scope', function($scope) {


    $scope.shops=[{"name":"x super market","id":"1","location":"India"},{"name":"y super market","id":"2","location":"India"},{"name":"z super market","id":"3","location":"India"},{"name":"a super market","id":"4","location":"India"}]

    $scope.subscribedShops=[{"name":"y super market","id":"2","location":"India"},{"name":"z super market","id":"3","location":"India"}]

//This is function which hide and show      
 $scope.check=function(t){
           var i=0;
           var b=false;
           for(i=0;i<$scope.subscribedShops.length;i++)
             {
               console.log("Chek function");
               if($scope.subscribedShops[i].id==t.id)
                 {
                 b=true;
                 break;
                 }   
             }


           return b;
         };
      }]);
    </script>

deitch · Accepted Answer · 2014-12-09 06:30:06Z

There are two ways to do this: in the view or in the controller. Either way, you are not doing anything angular special, just managing arrays.

In the first case, you create a separate hash of subscribedShops by ID. So your controller would look like:

var s = $scope.subscribedShops; // just to make this easier
$scope.shopsById = {};
for (i=0;i<s.length;i++) {
    if (s[i] && s[i].id) {
      $scope.shopsById[s[i].id] = true;
   }
}
// if you use lodash, this can all be replaced with
$scope.shopsById = _.indexBy($scope.subscribedShops,"id");

So now your view can be:

<li ng-repeat="shop in shops">{{shop.name}} {{shop.location}} Subscribed? {{shopsById[shop.id] ? "True" : "False"}}</li>

<!-- or as a button -->

<li ng-repeat="shop in shops">{{shop.name}} {{shop.location}} Subscribed? <button ng-show="shopsById[shop.id]">Click</button></li>

The alternative is to modify your list of shops to add the subscribed true/false into the object itself. This is cleaner in the view, but may make saving a resource harder.

var s = $scope.subscribedShops, // just to make this easier
hash = {};
for (i=0;i<s.length;i++) {
   if (s[i] && s[i].id) {
      hash[s[i].id] = true;
   }
}
// now modify the originals
for (i=0;i<$scope.shops.length;i++) {
   $scope.shops[i].subscribed = hash[$scope.shops[i].id] ? true : false;
}

Which simplifies your view:

<li ng-repeat="shop in shops">{{shop.name}} {{shop.location}} Subscribed? {{shop.subscribed ? "True" : "False"}}</li>

<!-- or as a button -->

<li ng-repeat="shop in shops">{{shop.name}} {{shop.location}} Subscribed? <button ng-show="shop.subscribed">Click</button></li>

Collectives™ on Stack Overflow

Array Handling in AngularJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related