1

In the controller i would like to put the http request of a json file into a function. Only when its outside of a function it works. Why? I would like to display the contents in the view.

Controller:

$http.get('components/json/list.json').success(function (data) {
    main.listNoFunction = data;
});

main.listFunction = function () {
    var result = null;
    $http.get('components/json/list.json').success(function (data) {
        result = data;
    });
    return result;
}

View:

// This works:
{{ main.listNoFunction }}

// This works NOT:
{{ main.listFunction }}

Thanks for your help! Vin

1
  • 3
    This will return always null, $http is async. You must return a promise or set the result inside a scope variable.
    – Fals
    Apr 23, 2015 at 21:17

2 Answers 2

5

you need to call the function, not just reference its object name.

example:

{{ main.listFunction() }}

Also, $http is asynchronous, meaning that the result of the function will be returned before the $http call is finished.

I suggest you read up on promises at https://docs.angularjs.org/api/ng/service/$q to achieve the desired effect.

2

There is no reason why the second example would work. Here is the explanation of the both snippets.

Snippet #1.

$http.get('components/json/list.json').success(function (data) {
    main.listNoFunction = data;
});

This code put in the controller issues GET request. When response is available (remember that this is asynchronous operation, so $http.get returns immediately), execution enters into success callback. Inside of it controllerAs (main) property listNoFunction is populated. Then $http.get kicks off new digest loop, which applies scope objects and refreshes the view. You see data rendered properly.

Snippet #2.

main.listFunction = function () {
    var result = null;
    $http.get('components/json/list.json').success(function (data) {
        result = data;
    });
    return result;
}

First of all, you didn't call the function main.listFunction. But even if you did, result would still be the same. Once again, $http.get doesn't wait until server responds, so entire main.listFunction returns undefined. When later data comes into success callback and result is set - it's too late because it will not be reflected in the view anyway, since result was passed by value not reference.

3
  • Okay, this is a little confusing to me since i dont understand the use of the $http.get request this way. So how is it then possible to have a function returned the value of the $http.get request? I read about the $resource service, maybe this is a better choice?
    – Vin Banton
    Apr 25, 2015 at 21:20
  • "So how is it then possible to have a function returned the value of the $http.get request?" It's not possible, because you can't return from AJAX request. $http.get returns a Promise object. This object provides an interface to set up a callback functions that will be called once data has come from the server. The same with $resourse.
    – dfsq
    Apr 25, 2015 at 21:26
  • Ok - In other words: I'd like to write a function that simply returns the content of a JSON file (whether with or without the $http.get ). Is there a simple way to do that?
    – Vin Banton
    Apr 25, 2015 at 21:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.