'get' undefined with $http in .service of AngularJS

Question

Thanks to some experts out there who helped me a few hours ago, I could move on to the next level. Here I face probably a trivial issue but for a novice like me, it is a difficult one.

As the title represents, I was returned with 'get' of undefined even though I was using $http.get which worked well in other function.

What am I missing or doing wrong? Could anyone help me?

[ERROR MSG]

TypeError: Cannot read property 'get' of undefined

[app.js]

(function () {
'use strict';
angular.module('myProject', [
])
.service('ProjectService', function($http) {
    var pjts = {};
    this.$http.get("projects_read.php", {}). // I have'get' here.
    .then(function(response){
        var pjts = response.data;
        this.getProjects = function() {
            return pjts;  
        };
    });
    this.getProjects = function() {
        return pjts;  
    },
    this.getProject = function(id) {
        for (var i = 0; i < pjts.length; i++) {
            if (pjts[i].id === id) {
            return pjts[i];
            }
        }
        return null;
    }
}.bind(this))
})();

Thank you so much in advance and hope you have a great day!

Thank you for your help, but it didn't work before so I put .this instead. Still, it does not work.. — James D.
– James D., Commented Oct 27, 2017 at 4:27
Why do you have .bind(this) in the second line from the end? That's going to cause problems. — JLRishe
– JLRishe, Commented Oct 27, 2017 at 4:57

JLRishe · Accepted Answer · 2017-10-27 17:34:26Z

2

First of all, remove the .bind(this) from the end of your function. Aside from causing a whole slew of other potential problems, it is probably causing Angular's dependency injection to fail to inject $http.

Also, $http is just a parameter to your function. It's not added to this so you shouldn't call it on this.

Also, the this inside your then handler will not be pointing to where you want it to. If you want to use this inside there, assign it to another variable and use that inside the handler:

var self = this;
// v------ this removed
$http.get("projects_read.php", {}). // I have'get' here.
.then(function(response){
    var pjts = response.data;
    // v----- self here
    self.getProjects = function() {
        return pjts;  
    };
});

edited Oct 27, 2017 at 17:34

answered Oct 27, 2017 at 4:07

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

7 Comments

Phil Over a year ago

Alternatively, use arrow functions

James D. Over a year ago

I tried this way, but didn't work. BTW, what do you mean by use arrow function?

James D. Over a year ago

@JLRishe, I meant the 'get' undefined issue remains.

JLRishe Over a year ago

@JamesD Added a new paragraph to the beginning of my answer. Please make that change as well.

James D. Over a year ago

Thank you so much @JSRishe! It worked!! I have spent almost two weeks to figure this out, but now I think I know some more better than when I started! Really helped me! Thank you again and have a wonderful day!!!

|

anoop · Accepted Answer · 2017-10-27 04:52:07Z

1

$http is just a passed param in service function , not bind to the scope of Service function. So either you can use it directly (without this) like:

$http.get("projects_read.php", {}).then(function(response){
    var pjts = response.data;
    this.getProjects = function() {
        return pjts;  
    };
});

OR,

if you really want to use this syntax , then assign the param $http to some service scoped variable., Like:

var self = this;
self.http = $http;
self.http.get("projects_read.php", {}).then(function(response){
        var pjts = response.data;
        this.getProjects = function() {
            return pjts;  
        };
    });

also, replace all this with self to avoid loosing the correct scope., and no need to do bind(this)

edited Oct 27, 2017 at 4:52

answered Oct 27, 2017 at 3:36

anoop

3,8222 gold badges18 silver badges28 bronze badges

8 Comments

James D. Over a year ago

Thank you for your work. Still, it does not work in both way.. what else could be wrong?

anoop Over a year ago

are you still getting same error Cannot read property 'get' of undefined ?, or different

James D. Over a year ago

Still the same, @anoop.

anoop Over a year ago

@JamesD.: there is typo in you program at }.bind(this)), it should be }).bind(this);, Further : if you go with one flag for this keyword, like : var self = this;, then there is no need to do .bind(this) also

James D. Over a year ago

Thank you @anoop. I think the link has been removed, but appreciate for your assistance!!! have a wonderful day!

|

Collectives™ on Stack Overflow

'get' undefined with $http in .service of AngularJS

2 Answers 2

7 Comments

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

8 Comments

Related