CODEWITHSUNDEEP
javascriptarraysangularjs
Moe
Moe

Reputation: 13

Looping through a javaScript object's array with angular

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.

Upvotes: 1

Views: 74

Answers (2)

Brent Washburne
Brent Washburne

Reputation: 13158

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>

Upvotes: 1

Nix
Nix

Reputation: 58522

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>

Upvotes: 1

Related Questions