CODEWITHSUNDEEP
javascriptangularjs
user3732216
user3732216

Reputation: 1589

Not displaying Array Object Values with Angular

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);
    }
});

Upvotes: 0

Views: 72

Answers (1)

Rytmis
Rytmis

Reputation: 32037

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}}

Upvotes: 1

Related Questions