Angular JS data response undefined [duplicate]

Question

I am new to Angular JS, and am trying to call Rest API using JSON data. When I run HTTP-server , am not getting back my response data.

function contacts(contactsdata) {
    contactsdata.getcontacts().then(function(data) {
        this.contactsinfo = data;
    });
}

(function(){ 
    var mod = angular.module('myapp');
    mod.controller("contacts", contacts);
    mod.service("contactsdata", function($http) {   
        this.getcontacts = function(){
            var execute1 = $http.get('http://localhost:3000/contacts');
            var execute2 = execute1.then(function(response) {
                return response.data;
            })
            return execute2;
        }
    });
})();

Dhananjay C · Accepted Answer · 2017-09-12 06:37:53Z

0

You can try this in service

       this.getcontacts = function(){
           return $http.get('http://localhost:3000/contacts');
       });

And use as

contactsdata.getcontacts().then(function(response){
    this.contactsinfo = response.data;
});

answered Sep 12, 2017 at 6:37

Dhananjay C

5979 silver badges36 bronze badges

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

Comments

brk · Accepted Answer · 2017-09-12 06:44:06Z

0

There are few issues here.

Need to pass an empty array while initializing angular like this

var mod = angular.module('myapp', []);
Need to inject the dependency of the service in the controller like this

mod.controller("contacts", ['$scope', 'contactsdata', contacts]);
You can return the promise from the service like return $http.get... & use the data in the service

function contacts($scope, contactsdata) {
  contactsdata.getcontacts().
  then(function(data) {
    console.log(data)
  });
}


(function() {
  var mod = angular.module('myapp', []);
  mod.controller("contacts", ['$scope', 'contactsdata', contacts]);
  mod.service("contactsdata", ['$http', function($http) {
    this.getcontacts = function() {
      return $http.get('https://jsonplaceholder.typicode.com/posts/1')
    }
  }])

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="contacts"></div>
</div>

answered Sep 12, 2017 at 6:44

brk

50.3k10 gold badges59 silver badges85 bronze badges

6 Comments

Phil Over a year ago

1) OP may have created the module elsewhere and is using the module getter angular.module(moduleName)

Phil Over a year ago

2) DI annotations are only required when minifying code

brk Over a year ago

Yes may be but that was not visible in the code snippet, so I have inject the dependency array

Phil Over a year ago

3) OP is returning the promise from $http

vipe Over a year ago

when I run the above code. It's shows " contacts is not defined" @Phil

|

Collectives™ on Stack Overflow

Angular JS data response undefined [duplicate]

2 Answers 2

Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Linked

Related