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? — Daedalus
– Daedalus, Commented Nov 29, 2016 at 10:03
have you tried: return jQuery.parseJSON(response.data); ? — Cecilia
– Cecilia, Commented Nov 29, 2016 at 10:03
@Cecilia actually $http default response transform already do that. The problem here is about how promises works. — lenilsondc
– lenilsondc, Commented Nov 29, 2016 at 10:14

lenilsondc · Accepted Answer · 2016-11-29 10:19:13Z

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
    })
}

Collectives™ on Stack Overflow

AngularJS: retrieve array from object after $http get

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related