CODEWITHSUNDEEP
javascripthtmlangularjs
user3109340
user3109340

Reputation:

Nested Loops Angular.JS using complex nested loops

I'm trying to loop through data with Angular.JS, but I can't figure out how to loop through data with specific formatting

I'm gonna use Java to explain what I'm trying to do

Example code:

int itemCount = 0;
for(int i = 0; i < JSON.length(); i = i + 3) {
    //Loop through this bit of html for every 3 items
    //this is a row
    <div class="row">
    for (int y = itemCount; y < JSON.length(); y++) {
        //This is an item
        <div class="item">
            <!--Some HTML for an item-->
        </div>
        itemCount = y;
    }
    </div>
    itemCount++;
}

Essentially, I'm trying to loop through all the items creating a new row for every three, so the HTML would look like this:

<div class="row">
    <div class="item">
        <h1>{{person1.name}}</h1>
    </div>
    <div class="item">
        <h1>{{person2.name}}</h1>
    </div>
    <div class="item">
        <h1>{{person3.name}}</h1>
    </div>
</div>
<div class="row">
    <div class="item">
        <h1>{{person4.name}}</h1>
    </div>
    <div class="item">
        <h1>{{person5.name}}</h1>
    </div>
    <div class="item">
        <h1>{{person6.name}}</h1>
    </div>
</div>
...
etc.

The Angular loop would sorta look like this:

<div class="people" ng-repeat="person in personCtrl.people">
     <div class="row" ng-repeat="
                    <!--Create a new row for every three people-->">
         <h1>{{person.name}}</h1>
         <p>{{person.occupation}}</p>
         ...
     </div>
</div>

I understand you have to use ng-repeat, but I don't understand how I would get this kind of loop in Angular.JS

Any help is appreciated.

edit:

This is my array format

var people = [
    {
        "name" : "jeff"
        "occupation" : "developer"
        "skills" : [
            {"name" : "Ruby"}
        ]
    }
]

I was planning on looping through it with some simple data binding

ng-repeat="person in arrayCtrl.people"

Upvotes: 1

Views: 610

Answers (2)

Andy Gaskell
Andy Gaskell

Reputation: 31761

Chunk your people array in the controller.

Array.prototype.chunk = function(chunkSize) {
    var array=this;
    return [].concat.apply([],
        array.map(function(elem,i) {
            return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];
        })
    );
}

Result:

> [1,2,3,4,5,6,7].chunk(3)
[[1,2,3],[4,5,6],[7]]

How to implement in Angular.JS

<div class="row" ng-repeat="chunk in Ctrl.chunks">
    <div class="item" ng-repeat="person in chunk.people">
             <h1>{{person.name}}</h1>
             ...
    </div>
</div>

Upvotes: 1

qwertynl
qwertynl

Reputation: 3933

I do not know exactly what you want but you could try something like this:

<div ng-repeat="person in arrayCtrl.people">
   <div class="name"> {{ person.name }} </div>
   <div class="skills" ng-repeat="skill in person.skills">
       {{ skill.name }}
   </div>
</div>

Upvotes: 0

Related Questions