How do I properly ng-repeat through nested key value pairs in angularJS
Solution 1
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>
Solution 2
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>
Armeen Moon
I am a generalist; slowly becoming a specialist in Web Development. I mix art, design, and technology, to create effective experiences that deliver value at scale. My professional goals are simple: surround myself with smart, energetic, creative people while working on solving problems that matter. Specialties: Functional and Object Oriented JavaScript ,Angular+, AngularJS, AWS, CSS/SCSS, Vector/DOM motion graphics, semantic HTML, NodeJS, Golang, and passionate about learning i18n/l10n, a11y, and modern web workflow.
Updated on July 18, 2022Comments
-
Armeen Moon almost 2 years
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>
-
Stranger over 8 yearsHow would you do this in a recursive loop?
-
hassassin over 8 yearsNot quite sure what you mean. Perhaps you would be better served to post a question?