Can't retrieve Angularjs $scope array last object

Question

I have an array with object in $scope in angularjs. I successfully push the object into array. It shows array is form in console but I can't retrieve the last object of array like normal array in javascript. The following is my code.

$scope.messages = [];

$http.get("http://localhost/php/retrieve_message.php").success(function (data)
{
    for (i = 0; i < data.length; i++)
    {
        $scope.messages.push(data[i]);
        console.log("success");
    }
}).error(function ()
{
    console.log("error");
});
console.log([$scope.messages); console.log($scope.messages[$scope.messages.length - 1]);

$http is an async method. If you console.log out of them, it's return empty or undefined. — Davide
– Davide, Commented Sep 28, 2016 at 7:28
but I console with console.log($scope.messages); it display a list of object. The problem now is I want to get last object in $scope.messages array — Chan Yoong Hon
– Chan Yoong Hon, Commented Sep 28, 2016 at 7:30
It's is like @Davide said - the method is async, which means you cannot console.log it outside the get method and suspect that it has already finished pulling data from the server at that point. — Łukasz Trzewik
– Łukasz Trzewik, Commented Sep 28, 2016 at 7:32
Yeah as David said $http is async which means it will fire the http request and go ahead with executing the rest of the code. Once the response is received execution will come to the success/failure function. — Ranjith V
– Ranjith V, Commented Sep 28, 2016 at 7:35

Mr.Orange · Accepted Answer · 2016-09-28 07:31:04Z

2

This is correct.

$scope.messages = [];

$http.get("http://localhost/php/retrieve_message.php").success(function(data) {
    for (i = 0; i < data.length; i++) {
        $scope.messages.push(data[i]);
        console.log("success");
    }
    console.log($scope.messages);
    console.log($scope.messages[$scope.messages.length - 1]);
}).error(function() {
    console.log("error");

});

answered Sep 28, 2016 at 7:31

Mr.Orange

4361 gold badge4 silver badges8 bronze badges

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

4 Comments

Chan Yoong Hon Over a year ago

Thanks, Problem Solved

Mr.Orange Over a year ago

@chanyoonghon Accept my answer so.

Chan Yoong Hon Over a year ago

But if I want to use the array in other place after $http. Can I do that?

Mr.Orange Over a year ago

@chanyoonghon you can use your array into success or you can think about github.com/caolan/async

Pawan B · Accepted Answer · 2016-09-28 07:41:11Z

You are making an Asynchronous request.

In this case, you receive a callback when the data has been received, which lets the browser continue to work as normal while your request is being handled.

 $scope.messages = [];

  $http.get("http://localhost/php/retrieve_message.php").success(function(data){
       for(i=0; i<data.length; i++){
            $scope.messages.push(data[i]);
             console.log("success");
       }
    // put your code in success method
    console.log($scope.messages);
    console.log($scope.messages[$scope.messages.length - 1]);

    }).error(function() {
        console.log("error");
    });

In your case you are accessing the list before the data has been received. So the length of $scope.messages is 0 and you are trying to get $scope.messages[-1]

You can learn more about Synchronous and asynchronous requests here

Ravi Teja · Accepted Answer · 2016-09-28 08:06:26Z

0

$scope.messages = [];

  $http.get("http://localhost/php/retrieve_message.php").success(function(data){
       // this callback function gets executed only after server returns a successful response. So, here you have access to data you have got from the server.
       for(i=0; i<data.length; i++){
            $scope.messages.push(data[i]);
             console.log("success");
       }
       console.log([$scope.messages);
       console.log($scope.messages[$scope.messages.length - 1]);
    }).error(function() {
        console.log("error");
    });
    // Following code executes before even server returns data.
    //console.log([$scope.messages);
    //console.log($scope.messages[$scope.messages.length - 1]);

edited Sep 28, 2016 at 8:06

answered Sep 28, 2016 at 7:36

Ravi Teja

1,1058 silver badges13 bronze badges

Comments

Riddhi Gohil · Accepted Answer · 2016-09-28 07:34:38Z

-1

Try by updating your for loop as :

for(var x in data){
    $scope.messages.push(x);
    console.log("success");
}

answered Sep 28, 2016 at 7:34

Riddhi Gohil

1,80819 silver badges18 bronze badges

Collectives™ on Stack Overflow

Can't retrieve Angularjs $scope array last object

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related