Looping through a javaScript object's array with angular

Question

So I'm absolutely new to writing any type of code, I'm trying to build a simple website using AngularJS and I'm having a problem with looping through a controller's object array through a directive template. My goal is to output each array string into a separate list item element in the template, for example in the controller I have

    $scope.items = [
    {
     list: ["1", "2", "3"],
     name: "whatever"
    },
    {
     list: ["4", "5", "6", "7", "8"],
     name: "whatever2"
    }]

in the directive template I have written something like this

    <h1>{{ directive.name }}</h1>
    <ul id= "items"></ul>
    <script>
            for (var i = 0; i < directive.list[].length; i++) {
                  document.getElementById("items").innerHTML = 
                   "<li>{{" + directive.list[i] + "}}</li>";
            };
    </script>

the name object retrieves correctly in index.html using the template but list object will not output the array, gave it my best shot, tried troubleshooting to get it right and I can't seem to figure it out, need help :( hope I'm being clear enough, this is my first attempt at creating anything and still trying to get familiar with all the jargon.

I think you need two repeats...

Nix
– Nix

2015-05-27 22:44:46 +00:00
Commented May 27, 2015 at 22:44 — Nix
– Nix, Commented May 27, 2015 at 22:44

Nix · Accepted Answer · 2015-05-27 22:45:40Z

1

Here is a shot:

<div ng-repeat="i in items">
   <h1>{{ i.name }}</h1>
   <ul>
     <li ng-repeat="item in i.list">{{i}} </li>
   </ul>
</div>

And the description:

Basically you want to loop through all the items in your array <div ng-repeat.. then for each of those items you want to create the <ul>

answered May 27, 2015 at 22:45

Nix

58.8k31 gold badges154 silver badges205 bronze badges

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

1 Comment

Moe Over a year ago

Thanks, it's just that i've written a seperate directive file and linked it to a template to write an HTML tag , so that i can move the objects into a JSON file from the controller and upload online once done. trying to experiment with different things, maybe getting ahead of myself

Brent Washburne · Accepted Answer · 2015-05-27 22:45:51Z

1

It's simple -- replace your <script> with this:

<ul>
    <li ng-repeat="item in items">{{ item.name }}
        <ul id="items">
            <li ng-repeat="list_item in item.list">{{ list_item }}</li>
        </ul>
    </li>
</ul>

answered May 27, 2015 at 22:45

Brent Washburne

13.2k4 gold badges65 silver badges86 bronze badges

Collectives™ on Stack Overflow

Looping through a javaScript object's array with angular

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related