An empty array is returned when calling $http.get it within a service

Question

I want to get the name from an array that is being generated from $http.get, however this is returning an empty array. When i do a console it see the array populated however when i loop inside the array to get the value of name property based on whether an id is equal to a certain, the array is empty.

In my controller i have a service call that shall return the name value.

var params = { Id: $scope.Id, SettingId: $scope.SettingId };
$scope.selectedUserName = helloService.getSelectedUserName($scope.UserId, params);

In my service

I have used the getUserList function to populate the list of user in a dropdown and it works by generating the array with the values.

However When i got another page , i want to be able to display the name of the selected user, so I wanted to use the same getUserList function to retrieve the name

this.getUserList = function (val) {
        var usersObj = [];
        var url = "/api/v1/hello/getusers";
        var params = { Id: val.Id, SettingId: val.SettingId };
        var config = { params: params };
        var promise = $http.get(url, config)
            .then(function (response) {
                angular.forEach(response.data, function (key, value) {
                    angular.forEach(key, function (k, index) {
                     usersObj[index] = ({ userId: k.userId, name: k.name});
                  });
                });
            },
          function errorCallback(response) {
                    console.log("Unable to perform get request");
                    throw response;
                });
        var usersList = usersObj;

        return usersObj;

    };


 this.getSelectedUserName = function (id, param) {
        var name = "";
        var userList =this.getUserList(param);



        angular.forEach(userList, function (value, key) {
            if (value.userId == id)
                name = value.name;
        });
        return name;
}

Array length is 0 but if i do a console.log(userList) before the loop , the array display the list of user data

 this.getSelectedUserName = function (id, param) {
        var name = "";
        var userList =this.getUserList(param);
        console.log(userList) ;
        angular.forEach(userList, function (value, key) {
            if (value.userId == id)
                name = value.name;
        });
        return name;
}

Thank you for kind responses.

Please see screenshot

score 1 · Answer 1 · answered Jun 11 '19 at 12:02

1

This is simple Javascript, not specific to Angular. You can do

userList.forEach(user => {
    if(user.userId === id) {
         name = user.name;
    }
});
return name;

answered Jun 11 '19 at 12:02

Akash Srivastav

756
5
15

score 0 · Answer 2 · answered Jun 11 '19 at 12:00

you can try like this. here we are using a async await.

Service

this.getUserList = function (val) {
        var usersObj = [];
        var url = "/api/v1/hello/getusers";
        var params = { Id: val.Id, SettingId: val.SettingId };
        var config = { params: params };
        return new Promise((resolve, reject) => {
           $http.get(url, config)
            .then(function (response) {
                angular.forEach(response.data, function (key, value) {
                    angular.forEach(key, function (k, index) {
                     usersObj[index] = ({ userId: k.userId, name: k.name});
                  });
                });
            },
            function errorCallback(response) {
                    console.log("Unable to perform get request");
                    throw response;
                });
            var usersList = usersObj;
            resolve(usersObj);
        });
    };


 this.getSelectedUserName = async function (id, param) {
        var name = "";
        var userList = await this.getUserList(param);
        console.log(userList);
        angular.forEach(userList, function (value, key) {
            if (value.userId == id)
                name = value.name;
        });
        return name;
}

let me know if it is working or not.

thank u for response am using AngularJS v1.5.5, i have tried the code , it is displaying {} on the user interface — snoopy, Jun 11 '19 at 12:30

Ben Racicot · Answer 3 · 2019-06-11T16:34:18.143

0

EDIT: If you're only trying to match one id in the array of users you don't even need to loop:

anArray = source.filter(source => source.toLowerCase().indexOf(id) === 0);
or
anObject = source.find(obj => obj.id === id);

Which Angular version is this? Your tag denotes 2.+ but you have $scope there which is ng1.x

Why can't you use ngFor in your view since you already have your arrays. You don't need to sort them in the control.

component

this.getSelectedUserName = function (id, param) {
    let name = ""; // should be array if you want to add unames to it
    let userList = this.getUserList(param);

    // what is `angular` here? And why loop here? Use ngFor in view.
    angular.forEach(userList, function (value, key) {
       if (value.userId == id){
           name = value.name; // will be overwritten each time
           // should be name.push(value.name); // but loop in view instead
       }
    });
    // this.users = name; // for your original sorted version
    this.users = userList;
}

In your view

<li *ngFor="let user of users; index as i;>
  {{user.name}}
</li>

edited Jun 11 '19 at 16:34

answered Jun 11 '19 at 12:13

Ben Racicot

5,332
12
66
130

I see what you're suggesting, but I highly doubt that more than one person will have the same userId, so there's really no need for an array. – Akash Srivastav Jun 11 '19 at 12:17
You're only trying to output a user with a matching id? – Ben Racicot Jun 11 '19 at 13:22
@BenRacicot yes i want to the user with a matching id. Am using angular 1.15 version. – snoopy Jun 11 '19 at 16:25
Ok then you'll want to use `find()` to return a match in the object not looping. Let me know if you need more help. – Ben Racicot Jun 11 '19 at 16:33

An empty array is returned when calling $http.get it within a service

3 Answers3