How to correctly return my data from AJAX call (AngularJS)

Question

I have a view that calls this function below which makes an AJAX call to our API - this for some reason always returns 'undefined' when I view this in the AngularScope using the Firefox DOM inspection tool.

If I check the Network tab I can see this URL has been called and can see the JSON which I expect, I then want to return the data.words JSON data but this is always returning undefined? If I remove the AJAX call and just leave in the last return with the 'static' and 'words' in this works as expected, so it is clear to me something about the returning in the AJAX success call doesn't seem to be right... any ideas??

// within a AngularJS service file

this.getAccSignoffWords = function() {
    var url = ApiService.getDomain() + 'account/signoff';
    $http({
        method : 'GET',
        url : url
    }).success(function(data) {
        if (data.success) {
            return data.words; // I want to return this JSON to the scope
        }
    }).error(function(data) {
        throw "Failed to get sign-off words";
    })['finally'](function(data) {

    });

    // return [ 'static', 'words' ]; // this line is commented out and only used for testing and is an example of the type of data expected from data.words
}

Try parsing the data in success call back: data= JSON.parse(data) — Nishanth Matha
– Nishanth Matha, Commented Sep 22, 2016 at 9:07
Hi Nishanth, where should this be placed - shall I remove the current return within the success block — Zabs
– Zabs, Commented Sep 22, 2016 at 9:09
your ajax doesn't return anything..that's just a call back... — Nishanth Matha
– Nishanth Matha, Commented Sep 22, 2016 at 9:16

Sachila Ranawaka · Accepted Answer · 2016-09-22 09:19:14Z

1

thing is when you are sending the http request, it take some time to process and send data back to your javascript code. but since the javascript is asynchronous, it doesn't wait until response return. so either you can return the whole http request like Umakanta Behera suggested or you can use a callback function to wait unit the response come back.

this.getAccSignoffWords = function(callback) {
    var url = ApiService.getDomain() + 'account/signoff';
    $http({
        method : 'GET',
        url : url
    }).success(function(data) {
        if (data.success) {
            callback() data.words
        }
    }).error(function(data) {
        throw "Failed to get sign-off words";
    })['finally'](function(data) {

    });
}

call this function like this

this.getAccSignoffWords(function(data){
     console.log(data) // your http response 
})

answered Sep 22, 2016 at 9:19

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

2 Comments

Zabs Over a year ago

Can you point out where the second 'calling' function goes in relation to my code (is this controller, service, view etc..) thanks

Sachila Ranawaka Over a year ago

Call this from ur controller

Nishanth Matha · Accepted Answer · 2016-09-22 09:12:18Z

1

that's because your ajax doesn't return anything.. if you want to assign it to scope you should be doing:

var self = this;
var url = ApiService.getDomain() + 'account/signoff';
    $http({
        method : 'GET',
        url : url
    }).success(function(data) {
        if (data.success) {
            self.getAccSignoffWords = data.words; // I want to return this JSON to the scope
        }
    }).error(function(data) {
        throw "Failed to get sign-off words";
    })['finally'](function(data) {

    });

edited Sep 22, 2016 at 9:12

answered Sep 22, 2016 at 9:06

Nishanth Matha

6,0892 gold badges22 silver badges29 bronze badges

Comments

Umakanta Behera · Accepted Answer · 2016-09-22 09:09:32Z

0

I think you are not retuning $http result.Could u please give a try to below code.

this.getAccSignoffWords = function() {
    var url = ApiService.getDomain() + 'account/signoff';
    return $http({
        method : 'GET',
        url : url
    }).success(function(data) {
        if (data.success) {
            return data.words; // I want to return this JSON to the scope
        }
    }).error(function(data) {
        throw "Failed to get sign-off words";
    })['finally'](function(data) {

    });

    // return [ 'static', 'words' ]; // this line is commented out and only used for testing and is an example of the type of data expected from data.words
}

answered Sep 22, 2016 at 9:09

Umakanta Behera

2631 silver badge12 bronze badges

2 Comments

Zabs Over a year ago

thanks Umakanta although that gives me the same issue, good shot at it though

Zabs Over a year ago

doesn't appear to work for me i'm doing something silly i am sure, i will keep on it :)

Collectives™ on Stack Overflow

How to correctly return my data from AJAX call (AngularJS)

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related