Attempting to display the contents of an array by iterating through it with a loop in a Angular JS using Javascript

Question

Attempting to display the contents of an array by iterating through it with a loop in a Angular JS using Javascript

I am attempting to display each item in an array that is a part of an object's property:

{
        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 specific object is within an array along with multiple other objects. My goal is to develop a function that iterates through all the objects and displays the duties array items in an unordered list with matching numbers of list items and array items.

Below is the function I am working on to accomplish this task:

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

javascript arrays angularjs loops while-loop

Answer 1

Answer №1

If you want to display data in this format, you can utilize Angular's ngRepeat functionality. Rather than creating a new function, simply nest two ngRepeats within your unordered list to access the second level of your dataset. The outer ngRepeat repeats the first layer of data, while exposing the second layer that can be repeated within the <li> tag:

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

Check out the Plunker for an example.

Answer 2

If you want to display data in this format, you can utilize Angular's ngRepeat functionality. Rather than creating a new function, simply nest two ngRepeats within your unordered list to access the second level of your dataset. The outer ngRepeat repeats the first layer of data, while exposing the second layer that can be repeated within the <li> tag:

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

Check out the Plunker for an example.

Answer 3

Answer №2

When utilizing a framework like Angular, it is best practice to avoid direct document writing and instead leverage the templating system and directives provided to render content on your page.

Assuming that the array of objects can be accessed by the controller and bound to the scope, you can display an unordered list of duties for each position with the following approach:

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>

Answer 4

When utilizing a framework like Angular, it is best practice to avoid direct document writing and instead leverage the templating system and directives provided to render content on your page.

Assuming that the array of objects can be accessed by the controller and bound to the scope, you can display an unordered list of duties for each position with the following approach:

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>

Attempting to display the contents of an array by iterating through it with a loop in a Angular JS using Javascript

Answer №1

Answer №2

Similar questions

tips for integrating html5 elements with django forms

Sending information to the parent component via props

When programming with PHP and JavaScript, managing events' start dates and end dates

Having trouble getting Node.js, express, socket.io, and ejs to work together?

Sync the simple login email to the profile email using AngularFire

Ways to implement ng-show without using attributes

Arranging a specialized array and displaying it in a tree structure using bash

I am attempting to update the background image pattern every time the page refreshes. Despite trying numerous codes, I have not been able to achieve the

Mastering the ng-submit directive for AngularJS

What is the cost associated with using the require() function in an Express.js application?

AngularJS ui-grid rows failing to adjust size based on content

Most effective method for adding JQuery events to dynamically generated buttons

Implement VueJS functionality to prevent form submission upon submission and instead submit the form upon keyup

Set a generic function type to a variable

Utilizing JavaScript and its scope to include text within an HTML document

Creating a custom R function (or nesting multiple functions) to partition the original dataset into separate dataframes for each unique individual

Can I retrieve the count of pixels below a certain threshold value using WebGL/OpenGL?

The functionality of the custom file upload button is experiencing issues on Microsoft Edge

a versatile tool or JavaScript module for dissecting different HTML documents

Mysterious Node JS Errors that Defy Explanation: "Cannot POST/GET"