Consume Rest web service with AngularJS

Question

This is my json data from my web service

[{"cameraid":"ggh","timestamp":"2016/05/10 01:31","filename":"ffffpg"},
{"cameraid":"mason","timestamp":"2016/05/10 05:31","filename":"aaa.png"}

My html file

<!doctype html>
<html ng-app="camListApp">
<head>
    <title>hi AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script>
    var camListApp = angular.module('camListApp');
    camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
    function Hello($scope, $http) {
        $http.get('http://localhost/camera/list').
            success(function(data) {
                $scope.record= data;
            });
    }
    </script>
</head>
<body>
    <div ng-controller="Hello">
        <table border = 1>
        <thead>
        <tr>
        <th>camid</th>
        <th>Timestamp</th>
        <th>Filename</th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="record in record">
        <td>{{record.cameraid}}</td>
        <td>{{record.timestamp}}</td>
        <td>{{record.filename}}</td>
        </tr>
        </tbody>
        </table>
    </div>
</body>
</html>

When I run my browser, no data is show in the table. What have I miss out or done wrong? Anybody can help? As i want to display all the data in the table

Answer 1

There are below issues in your code, which once fixed will make yor code working:

Missing [] from module definition. Change it as below:

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

The controller definition is incorrect as you have 2 callback functions (One within other). You only need one:

 camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){ $http.get('http://localhost/camera/list'). success(function(data) { $scope.record= data; }); }]);

Also the preferred way of handlin promises is using .then instead of .success

When you use the $http service it wraps up your data in an object and actual data is an attribute exposed on the returned response in callback. Access the data attribute in response as below:
```
 $http.get('https://api.github.com/users/addi90/repos').then(function(response) { $scope.records= response.data; }); 
```

I have created a working bin with sample data from my github repos: https://jsbin.com/qejapayuhi/1/edit?html,js,console,output

Answer 2

In your HTML you need to name the app:

<html ng-app="camListApp">

And then in your script you need to define the controller and the app, and bring in the services. Add, around the function:

var camListApp = angular.module('camListApp');
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
   // existing code
}

Angular is pretty fussy about these things. Since I can't easily reproduce your app, I'll be interested to find out if this worked for you.

Consume Rest web service with AngularJS

Question

2 answers

solution1
2 ACCPTED 2016-06-10 06:25:35

solution2
1 2016-06-10 05:25:05

Consume Rest web service with AngularJS

Question

2 answers

solution1 2 ACCPTED 2016-06-10 06:25:35

solution2 1 2016-06-10 05:25:05

solution1
2 ACCPTED 2016-06-10 06:25:35

solution2
1 2016-06-10 05:25:05