I'm trying to print an array using a loop in Javascript in Angular JS

Question

I'm trying to print out each array item from a property in an object:

{
        position:"Finance Office Assistant",
        employer:"Washtenaw County Finance Department",
        location:"Ann Arbor, MI",
        start_date:"2012",
        current: false,
        end_date:"2012",
        duties: [
            "Item 1",
            "Item 2",
            "Item 3" 
        ]
    },

This object is in an array, with several other objects. I'm trying to create a function that loops through all of the objects and prints out the duties array items in an unordered list with the exact number of list items and array items.

Here is the function I'm trying to write to do the task

$scope.dutyList = function() {
    var arrayLength = $scope.duties.length;
    while (arrayLength > 0) {
        console.log("dutyList run")
        document.write("<li> {{ dutyList }} </li>");
        --arrayLength;
    }
}

What result are you seeing from your code as it stands, and how is it unlike what you want? — S McCrohan
– S McCrohan, Commented May 12, 2015 at 3:02

tpie · Accepted Answer · 2015-05-12 03:16:40Z

1

You don't need a function to handle displaying data like this. Angular's ngRepeat is for this. To access the second level of of your data set you can nest two repeats in your unordered list. The first one (in a div) repeats the first layer of your data, and exposes the second layer, which repeat in the <li> tag:

  <ul>
      <div ng-repeat="d in data">
        <li ng-repeat="duty in d.duties">{{duty}}</li>  
      </div> 
  </ul>

Plunker

answered May 12, 2015 at 3:16

tpie

6,2393 gold badges24 silver badges41 bronze badges

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

1 Comment

KingPen2 Over a year ago

Tried nesting it before, had the syntax wrong. This works perfectly, thank you!

Dan Nixon · Accepted Answer · 2015-05-12 03:30:37Z

0

As a general rule, you don't want to write directly to the document when using a framework like Angular. Instead, you should use the built in templating system and directives to render your page.

I'm making some assumptions about the end goal here, but, assuming the array of objects can be accessed by the controller and attached to the scope, you could print your unordered list of duties for each position using something like the following.

angular.module('myApp', []).controller('myCtrl', function($scope){
  $scope.foo = [{
        position:"Finance Office Assistant",
        employer:"Washtenaw County Finance Department",
        location:"Ann Arbor, MI",
        start_date:"2012",
        current: false,
        end_date:"2012",
        duties: [
            "Item 1",
            "Item 2",
            "Item 3" 
        ]
    }, {
        position:"Another Position",
        employer:"Another Employer",
        location:"Ann Arbor, MI",
        start_date:"2012",
        current: false,
        end_date:"2012",
        duties: [
            "2nd Object, Item 1",
            "2nd Object, Item 2",
            "2nd Object, Item 3" 
        ]
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myCtrl'>
  <div ng-repeat='bar in foo'>
    <h1>{{ bar.position }}</h1>
    <ul>
      <li ng-repeat='duty in bar.duties'>
        {{ duty }}
      </li>
    </ul>
  </div>
</div>

edited May 12, 2015 at 3:30

answered May 12, 2015 at 3:10

Dan Nixon

1011 silver badge7 bronze badges

3 Comments

tpie Over a year ago

This will only work if you have display duties from one object.

Dan Nixon Over a year ago

@tpie You're correct - I missed that detail in the question. Fixed.

KingPen2 Over a year ago

Thank you, I'm just getting into angular and I'm definitely thinking too hard!

Collectives™ on Stack Overflow

I'm trying to print an array using a loop in Javascript in Angular JS

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related