How do I properly ng-repeat through nested key value pairs in angularJS

Question

View live code:

Angular JS

How in the world do I properly loop through nested key value pairs and properly output them like below?

View I want is a tree like so

-touts
  -classes
    -col-12 
    -col-md-12
    -col-lg-12

Currently the view is:

touts
  {"classes":["col-12","col-md-12","col-lg-12"]}

JS:

var currentApp = angular.module('currentApp', []);
currentApp.controller('ACtrl', function($scope){

    $scope.templates = {
        'touts' : [
            {
                'classes' : ['col-12', 'col-md-12', 'col-lg-12' ]
            }
        ]
    };
});

HTML:

<div ng-app="currentApp">
    <div ng-controller="ACtrl">
        <ul ng-repeat="(key, prop) in templates">
            <li>{{key}}</li>
              <li>
                  <ul ng-repeat="class in templates[key]">
                      <li>{{class}}</li>
                  </ul>
            </li>
        </ul>
    </div>
</div>

hassassin · Accepted Answer · 2014-01-30 01:50:04Z

24

You are pretty close, I updated the fiddle. http://jsfiddle.net/y9wj6/9/

   <ul ng-repeat="(key, prop) in templates">
        <li>{{key}}</li>
        <ul ng-repeat="val in prop">
            <ul ng-repeat="(o, values) in val">
            <li>{{o}}</li>
                 <ul ng-repeat="i in values">
                      <li>{{i}}</li>
                  </ul
             </ul>
        </ul>
    </ul>

answered Jan 30, 2014 at 1:50

hassassin

5,0641 gold badge32 silver badges39 bronze badges

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

2 Comments

Stranger Over a year ago

How would you do this in a recursive loop?

hassassin Over a year ago

Not quite sure what you mean. Perhaps you would be better served to post a question?

Chen-Tsu Lin · Accepted Answer · 2014-01-30 01:53:15Z

You must think gradually.

 templates = {'touts' : [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }]};  
 // key = 'touts'
 // props = [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }] 
 // props[0] = {'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }
 // classkey = 'classes'
 // classprop = ['col-12', 'col-md-12', 'col-lg-12' ]
 // and print classprop by ng-repeat

So you can try this:

 <div ng-app="currentApp">
    <div ng-controller="ACtrl">
        <ul ng-repeat="(key, props) in templates">
            <li>{{key}}</li>
            <li>
               <ul ng-repeat="(classkey, classprop) in props">
                  <li>{{classkey}}</li>
                  <li>
                      <ul>
                          <li ng-repeat="class in classprop">
                      </ul>
                  </li>
               </ul>
            </li>
         </ul>
    </div>
</div>

Bogus Hawtsauce · Accepted Answer · 2018-03-20 12:01:24Z

So this is pretty old question, however if you modified the object a bit (swap the array types for objects) the following template should work just fine.

angular.module('init', [])
  .controller('test', ['$scope', function($scope) {

    $scope.templates = {
      'touts': {
        'classes': {
          'col-12': {},
          'col-md-12': {},
          'col-lg-12': {}
        }
      }
    };
  }]);

ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="init" ng-controller="test">

  <script type="text/ng-template" id="recursive_item.html">
    {{key}}
    <ul>
      <li ng-repeat="(key, prop) in prop" ng-include="'recursive_item.html'"></li>
    </ul>
  </script>

  <ul>
    <li ng-repeat="(key, prop) in templates" ng-include="'recursive_item.html'"></li>
  </ul>

</div>

Collectives™ on Stack Overflow

How do I properly ng-repeat through nested key value pairs in angularJS

Angular JS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related