Nested Loops Angular.JS using complex nested loops

Question

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"

And can you give a sample of the data you want to display? (Skills, or all fields and loop the skills array as well) — tymeJV
– tymeJV, Commented Jun 18, 2014 at 13:17
Have you tried using ng-repeat? Can you please show what you have tried (and failed) to do? — qwertynl
– qwertynl, Commented Jun 18, 2014 at 13:22
@qwertynl Added angular type loop to give a better example of what I'm trying to do. — user3109340
– user3109340, Commented Jun 18, 2014 at 13:29

Andy Gaskell · Accepted Answer · 2014-06-18 13:49:11Z

1

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>

edited Jun 18, 2014 at 13:49

user3109340

answered Jun 18, 2014 at 13:23

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

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

2 Comments

user3109340 Over a year ago

I thought about doing this, and this would work, but is there not an easier method in Angular?

Andy Gaskell Over a year ago

You could maybe work something out with $index mod 3, but chunking seems cleaner to me. docs.angularjs.org/api/ng/directive/ngRepeat

qwertynl · Accepted Answer · 2014-06-18 13:24:39Z

0

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>

answered Jun 18, 2014 at 13:24

qwertynl

3,9331 gold badge24 silver badges43 bronze badges

1 Comment

user3109340 Over a year ago

I'm trying to create a row for every three people, not nest skills in people.

Collectives™ on Stack Overflow

Nested Loops Angular.JS using complex nested loops

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related