AngularJS HTTP Get JSON won't display

Question

I am trying to learn AngularJS, been puzzling over this problem all evening. Trying to load JSON data from a random generator and display it in the view with a service. {{ main.title }} works but ng-repeat="user in main.users" and {{ user.name }} displays nothing. Where have I gone wrong?

Index.html

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="main.ctrl.js"></script>
    <script src="users.serv.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class = "container">
    <h1>{{ main.title }}</h1>
    <div ng-repeat="user in main.users">
        <h2>{{ user.name }}</h2>
    </div>
</div>
</body>
</html>

app.js

angular.module('app', []);

main.ctrl.js

angular.module('app').controller('MainController', ['users', function(users) {
    var vm = this;
    users.get(function(data) {
        vm.users = data;
    });
    vm.title = 'Hello World';
}]);

users.serv.js

angular.module('app').factory('users', ['$http', function($http) {
    return {
        get: function (callback) {
            $http.get('http://www.json-generator.com/api/json/get/bJHFVOzrzC?indent=2').success(function(data) {
                return data;
            })
        }
    }
}]);

I think you need to call your method users.get() method, so that vm.users is initialised and has the required value — Yashika Garg
– Yashika Garg, Commented May 26, 2015 at 5:53

Arun P Johny · Accepted Answer · 2015-05-26 05:53:03Z

3

You need to invoke the callback once the ajax request is over

angular.module('app').factory('users', ['$http', function ($http) {
    return {
        get: function (callback) {
            $http.get('http://www.json-generator.com/api/json/get/bJHFVOzrzC?indent=2').success(function (data) {
                callback(data);
            })
        }
    }
}]);

Demo: Fiddle

edited May 26, 2015 at 5:53

answered May 26, 2015 at 5:51

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Phil Over a year ago

I like to pretend that they never added those success and error callbacks to the $http promise

natedog Over a year ago

That did it. Still trying to wrap my head around this whole callback thing.

NewDirection · Accepted Answer · 2015-05-26 06:39:30Z

1

Nice answer by Arun, Yet another way I prefer is, return http method from factory,then success or error or promise to use in controller as below.

main.ctrl.js

 angular.module('app').controller('MainController', ['users', function(users) {
        var vm = this;

        users.get().success(function (data) {       
        vm.users = data;   
       });

    vm.title = 'Hello World';
}]);

users.serv.js

angular.module('app').factory('users', ['$http', function($http) {
     return {
    get: function (callback) {
        return $http.get('http://www.json-generator.com/api/json/get/bJHFVOzrzC?indent=2');          
    }
}
}]);

answered May 26, 2015 at 6:39

NewDirection

11410 bronze badges

Comments

Devendra Singh · Accepted Answer · 2015-05-26 07:29:39Z

0

There are two ways to get back control over the data returned in ajax response. Either pass your own callback function to be invoked later on once data is received or do whatever you want in the success callback once you return the $http.get(...); everytime you go for an ajax call.

answered May 26, 2015 at 7:29

Devendra Singh

811 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

AngularJS HTTP Get JSON won't display

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related