Not displaying Array Object Values with Angular

Question

I have the following application and have been having issues on getting the application to display the object values beside the form. Its showing the divs and styles correctly but no values. Anyone see why that could be?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>Employee Directory</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/application.css">
    <script src="js/angular.min.js"></script>
    <script src="js/application.js"></script>
    <script src="js/dataService.js"></script>
</head>

<body ng-app="MyApp">
    <div class="container">
        <h1>Employee Directory</h1>
        <hr>
        <div id="form-container">
            <h3>Add an Entry</h2>
            <form role="form">
                <div class="form-group">
                    <label for="name">Employee:</label>
                    <input type="text" name="name" class="form-control" ng-model="employeeName"> 
                </div>
                <div class="form-group">
                    <label for="name">Street:</label>
                    <input type="text" name="street" class="form-control" ng-model="employeeStreet"> 
                </div>
                <div class="form-group">
                    <label for="name">City:</label>
                    <input type="text" name="name" class="form-control" ng-model="employeeCity"> 
                </div>
                <div class="form-group">
                    <label for="name">State:</label>
                    <input type="text" name="state" class="form-control" ng-model="employeeState"> 
                </div>
                <div class="form-group">
                    <label for="name">Zip Code:</label>
                    <input type="text" name="zipcode" class="form-control" ng-model="employeeZipCode"> 
                </div>
                <input type="submit" ng-click="addName()" class="btn btn-default btn-primary" value="Add Entry">
            </form>
        </div>
        <div id="employee-list">
            <div ng-repeat"employee in employeesArray" class="employee">
                <div class="employee-header">
                    <span class="glyphicon glyphicon-user"></span><strong>{{employee.employeeName}}</strong><button ng-click="deleteName()" class="cancel">X</button>
                </div>
                <div class="employee-footer">
                    <address>
                        {{employee.employeeStreet}}<br>
                        {{employee.employeeCity}}, {{employeeState}} {{employeeZipCode}}
                    </address>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

application.js

angular.module("MyApp",  []).controller("DBController", function ($scope, dataService) {
    $scope.employeeName;
    $scope.employeeStreet;
    $scope.employeeCity;
    $scope.employeeState;
    $scope.employeeZipCode;

    $scope.employeesArray = dataService.getEmployees();

    $scope.addEmployee = function() {
        dataService.addEmployee($scope.employeesArray.push({"employeeName": $scope.employeeName, "employeeStreet": $scope.employeeStreet, "employeeCity": $scope.employeeCity, "employeeState": $scope.employeeState, "employeeZipCode": $scope.employeeZipCode}));
    }

    $scope.deleteEmployee = function(deletedEmployee) {
        dataService.removeEmployee(deletedEmployee);
    } });

dataService.js

angular.module("MyApp").service("dataService", function() {

    var employeesArray = [{employeeName:'Joe Smith', employeeStreet:'12345 West 123nd Terrace', employeeCity:'Canton', employeeState:'Ohio', employeeZipCode:'12345'}];

    this.getEmployees = function() {
        return employeesArray;
    }

    this.addEmployee = function(employee) {
        employeesArray.push(employee);
    }

    this.removeEmployee = function(employee) {
        employeesArray.splice(employeesArray.indexOf(), 1);
    }
});

Well I'm not getting any errors in my console when I load the page but yes it is coming from the employee-list div. I see that the employeeState and employeeZipCode don't have the employee object attached to it like the other properties so I'll add that but I don't believe that is the cause because I"m not getting values for the other properties at all. — user3732216
– user3732216, Commented Nov 9, 2014 at 19:52

Rytmis · Accepted Answer · 2014-11-09 20:05:40Z

Couple of things wrong in your code. First:

<body ng-app="MyApp">

bootstraps your view with the MyApp module, but you have no controller declarations, so your controller code isn't running. Change it to:

<body ng-app="MyApp" ng-controller="DBController">

Second,

<input type="submit" ng-click="addName()" class="btn btn-default btn-primary" value="Add Entry">

is wrong, because your controller doesn't declare a scope function called addName. It's addEmployee, so the correct code is:

<input type="submit" ng-click="addEmployee()" class="btn btn-default btn-primary" value="Add Entry">

Finally,

<div ng-repeat"employee in employeesArray" class="employee">

is missing an equals sign. The correct code is:

<div ng-repeat="employee in employeesArray" class="employee">

With those three things corrected, you'll start to see some results (check out this plunk to see them right away).

Edit:

The next problems in your code are here:

dataService.addEmployee($scope.employeesArray.push({"employeeName": $scope.employeeName, "employeeStreet": $scope.employeeStreet, "employeeCity": $scope.employeeCity, "employeeState": $scope.employeeState, "employeeZipCode": $scope.employeeZipCode}));

Because you're manipulating the employeesArray by calling push and then calling addEmployee with the result of the push. This is a problem, because your getEmployees call returns a reference to the array, and what you are manipulating in the push call is in fact the internal state of DataService. Hence the duplicate effect. Instead, if you do this:

    var employee = {
      "employeeName": $scope.employeeName, 
      "employeeStreet": $scope.employeeStreet, 
      "employeeCity": $scope.employeeCity, 
      "employeeState": $scope.employeeState, 
      "employeeZipCode": $scope.employeeZipCode
    };
    dataService.addEmployee(employee);

you'll rid yourself of the duplicate record. Finally, your bindings in the ng-repeat look like this:

                    {{employee.employeeStreet}}<br>
                    {{employee.employeeCity}}, {{employeeState}} {{employeeZipCode}}

note that the last two bindings don't reference the employee in your ng-repeat, but instead refer to the ng-models in the parent scope. Change that to:

                    {{employee.employeeStreet}}<br>
                    {{employee.employeeCity}}, {{employee.employeeState}} {{employee.employeeZipCode}}

This works terrifically however when I fill out the form and click Add Entry it adds the employee and then another div with empty values. Can you explain why this is so I can understand what I did wrong. Thank you as well.
I love this answer because not only does it work but I fully understood what the issue was and why.

Collectives™ on Stack Overflow

Not displaying Array Object Values with Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related