Use a value of JSON within ng-Repeat AngularJS

Question

Let's say I have this JSON:

var myObj = {
    {"key1":"value1", "key2":5, "key3":"value3" },
    {"key1":"value4", "key2":2, "key3":"value5" },
    {"key1":"value6", "key2":4, "key3":"value6" },
}

I want to use this for ng-Repeat. But the values of "key2" must iterate within their own ng-repeat. So something like this:

<ul ng-repeat="x in myObj">
   <li> {{x.key1}} </li>
   <ul ng-repeat="y in x.key2">
      <li></li>
   </ul>
   <li> {{x.key3}} </li>
</ul>

Obviously this doesn't work. The result of the first array should like this (5 li-elements should be created):

<ul>
  <li> value1 </li>
  <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
  </ul>
  <li> value 3 </li>
</ul>

Maxim Shoustin · Accepted Answer · 2017-09-02 21:00:25Z

2

You can create custom method range that on range(n) will return [1,2,3, .. n]

HTML

<div ng-controller="MainCtrl">
 <ul ng-repeat="x in myObj">

   <li> {{x.key1}} </li>
   <ul ng-repeat="y in range(x.key2)">
      <li></li>
   </ul>
   <li> {{x.key3}} </li>
</ul>

JS

 $scope.myObj = [
    {"key1":"value1", "key2":5, "key3":"value3" },
    {"key1":"value4", "key2":2, "key3":"value5" },
    {"key1":"value6", "key2":4, "key3":"value6" },
];


$scope.range = function(count){
  var items = []; 
  for (var i = 0; i < count; i++) { 
    items.push(i) 
  } 

  return items;
}

Demo Plunker

edited Sep 2, 2017 at 21:00

answered Sep 2, 2017 at 20:53

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

Comments

Manoj · Accepted Answer · 2017-09-02 21:34:18Z

0

Add this method in your controller as

 $scope.getNumber = function(count){
      return new Array(count);  
    }

and update your html as

 <ul ng-repeat="x in myObj">
       <li> {{x.key1}} </li>
       <ul ng-repeat="y in getNumber(x.key2)">
          <li></li>
       </ul>
   <li> {{x.key3}} </li>
</ul>

edited Sep 2, 2017 at 21:34

answered Sep 2, 2017 at 21:03

Manoj

1,2058 silver badges11 bronze badges

Collectives™ on Stack Overflow

Use a value of JSON within ng-Repeat 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