Displaying data inside table rows from a Json Array - AngularJs

Question

I am quite new with AngularJs,and created a table. Each row is reading data from a JsonArray which is declared inside a controller. However,the rows are empty.

The code is shown here: https://jsfiddle.net/00x8bwp0/9/

 <body>

<div class="container">
    <div class="row row-content" ng-controller="tableController">            
          <div class="col-xs-12 col-sm-9" >
            <h2>Facts &amp; Figures</h2>
             <div class="table-responsive">
             <table class="table table-striped">
                <tr>
                    <th>Name</th>
                    <th>Date of Birth</th>
                    <th>Gender</th>
                    <th>Salary</th>
                </tr>
                <tr ng-repeat="employee in employees">
                    <td>{{employee.name}}</td>
                    <td>{{employee.dateOfBirth | date:"dd/MM/yyyy" }}</td>
                    <td>{{employee.gender }}</td>
                    <td>{{employee.salary | number:2}}</td>
                </tr>

             </table>
            </div>

         </div>
    </div>
</div>
<script src="../bower_components/angular/angular.min.js"></script>
<script>
     var app = angular.module('filterApp',[]);

     app.module('tableController',function(){
       var employees = [
            {
                name: "Ben", dateOfBirth: new Date("November 23, 1980"),
                gender: "Male", salary: 55000.788
            },
            {
                name: "Sara", dateOfBirth: new Date("May 05, 1970"),
                gender: "Female", salary: 68000
            },
            {
                name: "Mark", dateOfBirth: new Date("August 15, 1974"),
                gender: "Male", salary: 57000
            },
            {
                name: "Pam", dateOfBirth: new Date("October 27, 1979"),
                gender: "Female", salary: 53000
            },
            {
                name: "Todd", dateOfBirth: new Date("December 30, 1983"),
                gender: "Male", salary: 60000
            }
        ];
       this.employees = employees;
   });
</script>

What is wrong?

Thanks,

Theo.

Saurabh Agrawal · Accepted Answer · 2017-02-19 17:02:48Z

Two mistakes you made here

1, You are defining cotroller but using app.module('tableController',function(){ so change it to app.controller('tableController',function(){.

2, Define your controller in view with as i.e. tableController as ctrl

Try this

<!DOCTYPE html>
<html lang="en" ng-app="filterApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">   
</script>                 

<body>


    <div class="container">
        <div class="row row-content" ng-controller="tableController as ctrl">            
          <div class="col-xs-12 col-sm-9" >
            <h2>Facts &amp; Figures</h2>
            <div class="table-responsive">
               <table class="table table-striped">
                <tr>
                    <th>Name</th>
                    <th>Date of Birth</th>
                    <th>Gender</th>
                    <th>Salary</th>
                </tr>
                <tr ng-repeat="employee in ctrl.employees">
                    <td>{{employee.name}}</td>
                    <td>{{employee.dateOfBirth | date:"dd/MM/yyyy" }}</td>
                    <td>{{employee.gender }}</td>
                    <td>{{employee.salary | number:2}}</td>
                </tr>

            </table>
        </div>

    </div>
</div>
</div>
<script>

  var app = angular.module('filterApp',[]);

     app.controller('tableController',function(){
       var employees = [
            {
                name: "Ben", dateOfBirth: new Date("November 23, 1980"),
                gender: "Male", salary: 55000.788
            },
            {
                name: "Sara", dateOfBirth: new Date("May 05, 1970"),
                gender: "Female", salary: 68000
            },
            {
                name: "Mark", dateOfBirth: new Date("August 15, 1974"),
                gender: "Male", salary: 57000
            },
            {
                name: "Pam", dateOfBirth: new Date("October 27, 1979"),
                gender: "Female", salary: 53000
            },
            {
                name: "Todd", dateOfBirth: new Date("December 30, 1983"),
                gender: "Male", salary: 60000
            }
        ];
       this.employees = employees;
   });
</script>

</body>
</html>

StepUp · Accepted Answer · 2017-02-19 16:45:16Z

1

At first, you should declare ng-app to be recognized by Angular framework. Let me show an example:

<!doctype html>
<html ng-app="yourApp">
    <head>
        <link href="Content/bootstrap.css" rel="stylesheet"/>
        <link href="Content/animations.css" rel="stylesheet" />
        <title>Mockup application:). You can do what you want.:)</title>              
    </head>
    <body >  

        <div ng-view></div>  



        <script src="scripts/angular.js"></script>
        <script src="scripts/angular-route.js"></script> 
        <script src="scripts/angular-ui-bootstrap.js"></script>  
        <script src="app/app.js"></script>
        <script src="app/controllers/tableController.js"> </script>        
    </body>
</html>

then in your tableController you should declare you variable in scope(not in this). Scope is a glue between view and controller. It is like pipe between two bottles to pour water from one bottle to another bottle.

For example:

(function()
{         
    var tableController=function($scope) { 
                 $scope.employees= [];

                 function init() {                        
                    $scope.employees=[
            {
                name: "Ben", dateOfBirth: new Date("November 23, 1980"),
                gender: "Male", salary: 55000.788
            },
            {
                name: "Sara", dateOfBirth: new Date("May 05, 1970"),
                gender: "Female", salary: 68000
            },
            {
                name: "Mark", dateOfBirth: new Date("August 15, 1974"),
                gender: "Male", salary: 57000
            },
            {
                name: "Pam", dateOfBirth: new Date("October 27, 1979"),
                gender: "Female", salary: 53000
            },
            {
                name: "Todd", dateOfBirth: new Date("December 30, 1983"),
                gender: "Male", salary: 60000
            }
        ];
                 }

                 init();            
             };    


    tableController.$inject=['$scope'];   

    angular.module('yourApp').controller('tableController', tableController);        
}());

edited Feb 19, 2017 at 16:45

answered Feb 19, 2017 at 16:38

StepUp

38.5k16 gold badges94 silver badges158 bronze badges

6 Comments

Theo Over a year ago

I put <html lang="en" ng-app="filterApp"> at the top of the page. And still nothing happens:(. I haven't checked the $inject thing yet,but I suppose it has to do something with dependency injection(I use it in Android Development a lot).

StepUp Over a year ago

@Theo check injection as it is the most significant part of data binding(binding view and controller) .

Theo Over a year ago

I am pretty sure that this can be solved without injection.

StepUp Over a year ago

@Theo you cannot bind properties without $scope.

Saurabh Agrawal Over a year ago

@StepUp you can do it without $scope also. check my answer

|

user5699040user5699040 · Accepted Answer · 2017-02-19 17:05:54Z

I fixed something in your code. Now it works correctly. Don't forget about ng-app and how to add controllers in your app. If you have a questions, please ask!

var app = angular.module('filterApp', []);

app.controller('tableController', function() {

  var employees = [{
    name: "Ben",
    dateOfBirth: new Date("November 23, 1980"),
    gender: "Male",
    salary: 55000.788
  }, {
    name: "Sara",
    dateOfBirth: new Date("May 05, 1970"),
    gender: "Female",
    salary: 68000
  }, {
    name: "Mark",
    dateOfBirth: new Date("August 15, 1974"),
    gender: "Male",
    salary: 57000
  }, {
    name: "Pam",
    dateOfBirth: new Date("October 27, 1979"),
    gender: "Female",
    salary: 53000
  }, {
    name: "Todd",
    dateOfBirth: new Date("December 30, 1983"),
    gender: "Male",
    salary: 60000
  }];

  this.employees = employees;
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css')

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="filterApp">
  <div class="row row-content" ng-controller="tableController as vm">
    <div class="col-xs-12 col-sm-9">
      <h2>Facts &amp; Figures</h2>
      <div class="table-responsive">
        <table class="table table-striped">
          <tr>
            <th>Name</th>
            <th>Date of Birth</th>
            <th>Genter</th>
            <th>Salary</th>
          </tr>
          <tr ng-repeat="employee in vm.employees">
            <td>{{employee.name}}</td>
            <td>{{employee.dateOfBirth | date:"dd/MM/yyyy" }}</td>
            <td>{{employee.gender }}</td>
            <td>{{employee.salary | number:2}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Displaying data inside table rows from a Json Array - AngularJs

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related