Using Angular's group-by expression over an array of objects each with a nested array

Question

I am trying to use Angulars group-by syntax to create a dropdown for data of the form

[{name:'xyz', subitems:[{}...N]}...N] (see below)

http://plnkr.co/edit/Rthy3Bje7ISYVOSwzIZZ?p=preview

It doesn't seem like group-by supports this structure and so I am left using ng-repeat on optgroup elements. This puts me in the position of having to treat the selected item as a string which I then have to parse back to an object.

Question 1: Can Angular's group-by syntax work on my data structure to yield appropriate optgroups?

If Not Then

Question 2: Is my current implementation using ng-repeater over optgroups the basic flavor I will have to use to solve this problem or am I missing a simpler solution?

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
  </head>

  <body ng-controller="myCtrl">

    <h3>Can select-group-by expression be used here????</h3>
    <select ng-options="obj.name for obj in data" ng-model="selectedObj">
    </select>
    {{selectedObj}}

    <h3>In lieu of repeating optgroups?</h3>
    <select ng-model="selectedModel2" ng-change="convert()">
      <optgroup ng-repeat="obj in data" label="{{obj.name}}">
        <option value="{{bsnObj}}" 
                ng-repeat="bsnObj in obj.bsnObjs">{{bsnObj.name}}</option>
      </optgroup>
    </select>
    {{selectedModel2}}

    <script>
      var app=angular.module("app",[]);
      app.controller("myCtrl",function($scope){

        $scope.convert=function(){
          $scope.selectedModel2 = JSON.parse(this.selectedModel2);
        };

        $scope.data=[
          {"name" : "forms", bsnObjs: [{name:"formA"},{name:"formB"}]},
          {"name" : "docs", bsnObjs: [{name:"docsA"},{name:"docsB"}]}
        ]
      });
      angular.bootstrap(document,["app"]);
    </script>

  </body>

</html>

I think you need to flatten the list to use ng-options with group by. Otherwise, that's seems fine. — New Dev
– New Dev, Commented Oct 22, 2014 at 18:15
@NewDev, After looking at the docs and examples that (flat data) was my impression a well. — mccainz
– mccainz, Commented Oct 22, 2014 at 18:20

Abhay · Accepted Answer · 2016-01-19 08:21:32Z

2

Use below code to flatten the list in case you have nested array of objects like below json:

$scope.data=[
            {"name" : "forms", bsnObjs: [{name:"formA"},{name:"formB"}]},
            {"name" : "docs", bsnObjs: [{name:"docsA"},{name:"docsB"}]}
     ];
    var options = [];
    for(indexKey1 in $scope.data) {
        for(indexKey2 in $scope.data[indexKey1].bsnObjs) {
            ($scope.data[indexKey1].bsnObjs[indexKey2]).parent_name = $scope.data[indexKey1].name;
             options.push($scope.data[indexKey1].bsnObjs[indexKey2]);
        }
    }
    $scope.data = options;
    console.log($scope.data); // your flatten list

And now use :

 <select ng-options="obj.name group by obj.parent_name for obj in data"></select>

answered Jan 19, 2016 at 8:21

Abhay

6,7904 gold badges29 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Using Angular's group-by expression over an array of objects each with a nested array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related