AngularJS: retrieve array from object after $http get

Question

Sorry I am new to Angular. And this is probably dump question. I have following data structure in a json:

[
    {"id": "1", "name": "Alan", "location": "US"}, 
    {"id": "2", "name": "Bella", "location": "UK"}
]

I have following service:

    let users = getData();

    function getUsers() {
        return users;
    }
    function getData() {
        return $http
            .get("./data/users.json")
            .then(function(response) {
                return response.data;
            });
    }
    function addUser(user) {
        let id = users.$$state.value[users.$$state.value.length - 1].id++;
        users.$$state.value.push({
              // adding user
        })
    }

I am obtaining some very inconvenient object from $http.get. How to get it back to array representation?

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Daedalus, Nov 29 '16 at 10:03
have you tried: **return jQuery.parseJSON(response.data);** ? — Cecilia, Nov 29 '16 at 10:03
$http.get("./data/users.json").then(onUserComplete); var onUserComplete = function(response){$scope.user = response.data;} Unless I'm missing the main point of what you're trying the above two lines should be able to replace everything you written so far — Zephire, Nov 29 '16 at 10:09
@Rudziankoŭ I know you are using angular and i proposed you the usage of that jQuery function. If you cannot use jQuery you could use *return angular.fromJson(response.data);* — Cecilia, Nov 29 '16 at 10:10
@Cecilia actually `$http` default response transform already do that. The problem here is about how promises works. — lenilsondc, Nov 29 '16 at 10:14
@LenilsondeCastro you are right ! I'd check your answer as useful — Cecilia, Nov 29 '16 at 11:37

score 3 · Accepted Answer · answered Nov 29 '16 at 10:19

The problem here is the lack of compreension on how promises work, your $http call is not returning the response, but a promise of that request which is async. Promises are used exactly for this scenario, when you have async tasks and need to subscribe callbacks to its resolution.

Anyways, instead of trying to use the promise returned directly, you must subscribe a callback to the success topic, which in promises is given by the then(fn) method and feed your variable with the data returned from your chained promise on the $http.get().then ...$ .

For example:

let users = [];

getData()
    .then(function (data) {
        users = data;
    });

function getUsers() {
    return users;
}

function getData() {
    return $http
        .get("./data/users.json")
        .then(function(response) {
            return response.data;
        });
}

function addUser(user) {
    let id = users.$$state.value[users.$$state.value.length - 1].id++;
    users.$$state.value.push({
          // adding user
    })
}

AngularJS: retrieve array from object after $http get

1 Answers1