Query on accessing array object from AngularJS

Question

I am new to angularjs currently I am learning how to read array objects and display in view.

HTML Code:

<body ng-app="myDirective" ng-controller="myController">
<div class="container border_bottom">
    {{welcomeMessage}}<br />
    <label>First Name</label> : {{fullname.firstName}}<br />
    <label>Last Name</label> : {{fullname.LastName}}<br />
    Employee Details <br /> 
    <ul>
        <li ng-repeat="emp in employee">
            <div>                    
                <label>Employee ID</label>{{employee.empId}}<br/>
                <label>Employee Name</label>{{employee.empName}}<br/>
                <label>Voter Count</label>{{employee.voteCount}}
            </div>
        </li>
    </ul>

</div>

AngularJS Code:

var myApp = angular.module("myDirective", []);

myApp.controller("myController", function ($scope) {
$scope.welcomeMessage = "Hello ";
$scope.fullname = { firstName: "Mahadevan", LastName: "Sivasubramanian" }

$scope.employee = [
    { empId: 1, empName: "Mahadevan", voteCount: 0 },
    { empId: 2, empName: "john", voteCount: 0 },
    { empId: 3, empName: "Siva", voteCount: 0 }
];
});

I am not getting any error. Where I am doing mistake?

it works fine, what is the issue?

Sajeetharan
– Sajeetharan

2017-08-13 03:21:23 +00:00
Commented Aug 13, 2017 at 3:21 — Sajeetharan
– Sajeetharan, Commented Aug 13, 2017 at 3:21
I am not getting the value of array

Mr.M
– Mr.M

2017-08-13 03:24:03 +00:00
Commented Aug 13, 2017 at 3:24 — Mr.M
– Mr.M, Commented Aug 13, 2017 at 3:24
check the answer below

Sajeetharan
– Sajeetharan

2017-08-13 03:24:54 +00:00
Commented Aug 13, 2017 at 3:24 — Sajeetharan
– Sajeetharan, Commented Aug 13, 2017 at 3:24

Charlie · Accepted Answer · 2017-08-13 03:35:21Z

1

You should access the current element by emp in the model of your ng-repeat

<li ng-repeat="emp in employee">
            <div>                    
                <label>Employee ID</label>{{emp.empId}}<br/>
                <label>Employee Name</label>{{emp.empName}}<br/>
                <label>Voter Count</label>{{emp.voteCount}}
            </div>
</li>

ng-repeat simple usage

<div ng-repeat="anElement in anArray">
  {{anElement}}
</div>

edited Aug 13, 2017 at 3:35

answered Aug 13, 2017 at 3:25

Charlie

24k12 gold badges65 silver badges96 bronze badges

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

4 Comments

Charlie Over a year ago

I hope SO questions are designed to be answered more than once if one deems that is appropriate.

Charlie Over a year ago

It should be - "Yes you are correct, but not the same *words"

Sajeetharan Over a year ago

Well if it so, then my mistake. Usually its the answers should not be the same! btw I did not downvote

Charlie Over a year ago

Well I never thought you did. But it is easier to find in SO the answers which cite same solution for a problem than different ones.

Sajeetharan · Accepted Answer · 2017-08-13 03:22:09Z

0

You should access emp not employee inside ng-repeat

<li ng-repeat="emp in employee">
                <div>                    
                    <label>Employee ID</label>{{emp.empId}}<br/>
                    <label>Employee Name</label>{{emp.empName}}<br/>
                    <label>Voter Count</label>{{emp.voteCount}}
                </div>
</li>

DEMO

var myApp = angular.module("myDirective", []);
myApp.controller("myController", function ($scope) {
$scope.welcomeMessage = "Hello ";
$scope.fullname = { firstName: "Mahadevan", LastName: "Sivasubramanian" }
$scope.employee = [
    { empId: 1, empName: "Mahadevan", voteCount: 0 },
    { empId: 2, empName: "john", voteCount: 0 },
    { empId: 3, empName: "Siva", voteCount: 0 }
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myDirective" ng-controller="myController">
<div class="container border_bottom">
    {{welcomeMessage}}<br />
    <label>First Name</label> : {{fullname.firstName}}<br />
    <label>Last Name</label> : {{fullname.LastName}}<br />
    Employee Details <br /> 
    <ul>
        <li ng-repeat="emp in employee">
            <div>                    
                <label>Employee ID</label>{{emp.empId}}<br/>
                <label>Employee Name</label>{{emp.empName}}<br/>
                <label>Voter Count</label>{{emp.voteCount}}
            </div>
        </li>
    </ul>

</div>

answered Aug 13, 2017 at 3:22

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

Mr.M Over a year ago

actually my trainer accessing emp not employee why for them is coming but not for me

Sajeetharan Over a year ago

you should access emp only

Collectives™ on Stack Overflow

Query on accessing array object from AngularJS

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related