Using a Angular controller to show JSON data from API

Question

Om using Angular to show data from a JSON object from an API. This is my controller:

angular.module('todoApp', []).controller('ListController', function($http) {
    var todoList = this;

    todoList.todos = [{"id":1,"uname":"BluePrint","pname":"Birdie","content":"DHSvahdgsvadjavsdj","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":2,"uname":"BluePrint","pname":"Fiskpinne","content":"gggggggggggggggggggg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":3,"uname":"BluePrint","pname":"KulGrej","content":"hdbjsdhfgjsdhfg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":4,"uname":"Howken","pname":"KulGrej","content":"xczzzzz","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":5,"uname":"Howken","pname":"Birdie","content":"aaaaaaaaaaaaaaaaaa","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":6,"uname":"Howken","pname":"Fiskpinne","content":"\u00e5\u00e4\u00f6\u00e5\u00e4\u00f6\u00e5","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":7,"uname":"Howken","pname":"KulGrej","content":"sssssggggg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"}];
    console.log([{"id":1,"uname":"BluePrint","pname":"Birdie","content":"DHSvahdgsvadjavsdj","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":2,"uname":"BluePrint","pname":"Fiskpinne","content":"gggggggggggggggggggg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":3,"uname":"BluePrint","pname":"KulGrej","content":"hdbjsdhfgjsdhfg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":4,"uname":"Howken","pname":"KulGrej","content":"xczzzzz","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":5,"uname":"Howken","pname":"Birdie","content":"aaaaaaaaaaaaaaaaaa","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":6,"uname":"Howken","pname":"Fiskpinne","content":"\u00e5\u00e4\u00f6\u00e5\u00e4\u00f6\u00e5","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":7,"uname":"Howken","pname":"KulGrej","content":"sssssggggg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"}]);

    todoList.todos2 = 
        $http({method : 'GET',url : 'http://localhost:8000/notes'})
            .success(function(data, status) {
                console.log(data);
                return [data];
            })
            .error(function(data, status) {
                alert("Error");
            });
});

And this is my html:

<!doctype html>
<html ng-app="todoApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="/js/ListController.js"></script>
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="ListController as todoList">
      <ul class="unstyled">
        <li ng-repeat="todo in todoList.todos2">
          {{ todo.content }}
        </li>
      </ul>
    </div>
  </body>
</html>

I'm debugging by using the raw data from my test API as todoList.todos and the function that should generate the "real" data as todoList.todos2.

Using my raw data gives the correct answer (a list of the "content" elements in each JSON object), but using todo2 only gives me two empty list elements in the list.

The URL in the controller gives me the correct JSON data, I have checked that.

You can see printscreens on the results when working and not working here: https://i.sstatic.net/AWKN9.jpg

Where did I do it wrong?

Did you try $http({method : 'GET',url : 'http://localhost:8000/notes'}) .success(function(data, status) { console.log(data); this.todoList.todos2 = data; }) .error(function(data, status) { alert("Error"); }); — Oliver
– Oliver, Commented Jan 4, 2016 at 17:41
@IgnacioChiazzo I was doing some trial and error to see if I could find out what was wrong. I had data only at first and I just forgot to remove the brackets before posting here... — BluePrint
– BluePrint, Commented Jan 4, 2016 at 17:42
If your api is returning JSON, I would suggest you use $resource instead of $http. — Galdo
– Galdo, Commented Jan 4, 2016 at 17:50

Abed Alzain · Accepted Answer · 2016-01-04 17:57:01Z

4

the $http service returns a promise, it dose not return JSON data.

here is the using of $http service.

angular.module('todoApp', []).controller('ListController', function($http) {
    var todoList = this;

    $http({method : 'GET',url : 'http://localhost:8000/notes'})
       .then(function(response) {
           console.log(response.data);
           todoList.todos2 = response.data;
       }, function() {
           alert("Error");
       });
});

edited Jan 4, 2016 at 17:57

answered Jan 4, 2016 at 17:41

Abed Alzain

7594 silver badges9 bronze badges

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

3 Comments

georgeawg Over a year ago

The .success and .error methods are deprecated -- docs.angularjs.org/api/ng/service/$http#deprecation-notice

georgeawg Over a year ago

The .then method returns a response object not (data, status). Please read the Docs.

georgeawg Over a year ago

Should be .then (function (response) { todolist.todos2 = response.data; });

Alnitak · Accepted Answer · 2016-01-04 18:04:22Z

The .success and .error functions are deprecated, and $http returns a promise that is resolved with the response object, hence:

$http.get(...).then(function(res) {
    todoList.todos2 = res.data;
}).catch(e) {
    alert(e);
});

However I'd urge you to investigate $resource instead of using $http directly:

app.factory('TodoResource', ['$resource',
    function($resource) {
        return $resource('/notes', {}, {
            query: { isArray: true }
        });
    }
]);

and then inject that TodoResource into your controller:

app.controller('ListController', [$scope, 'TodoResource',
    function($scope, TodoResource) {
        $scope.todos2 = TodoResource.query();
    }
]);

You can then add RESTful methods to your TodoResource object that automatically handle inserts, updates and deletes.

Collectives™ on Stack Overflow

Using a Angular controller to show JSON data from API

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related