"Cannot read Property" after an http.get request

Question

Hello, all right?

I have the following problem. I am making a Restful request (http.get) and am writing the received object into a variable within $Scope. However, when I try to access this variable inside the controller I get the following error:

My controller:

.controller('chartEvapo', function($http, $scope) {
  $http.get(meurepositorio)
    .success(function(response) {
      angular.forEach(response, function(response) {
        $scope.cityOBJ = response;
      });
    });

    var teste = $scope.cityOBJ.info.etppri;
})

And the mistake:

Cannot read Property 'info' of Undefined

What I find strange is that I can print the figures as follows:

<div>
  {{cityOBJ.info.etppri}}
</div>

The console return.log(Response) is:

 Object{_id: Object, id:"1", info:Object"}
 _id: Object
 id: "1"
 info: Object
 __proto__: Object

EDIT:

With the following controller I had the following error:

.controller('chartEvapo', function($http, $scope) {
var teste;

$http
    .get(meurepositorio)
    .success(function(response) {
        $scope.cityOBJ = response;
        atualizaTeste();
    });

// está função ira atualizar a variável teste para você
function atualizaTeste() {
    this.teste = $scope.cityOBJ.info.etppri;
}
});

Typeerror: Cannot read Property 'etppri' of Undefined at actualizTeste (controllers.js)

EDIT 2: With JSON.stringify;

  function atualizaTeste() {
    console.log(JSON.stringify($scope.cityOBJ));
    this.teste = $scope.cityOBJ.info.etppri;
}

Console return:

[{"_id":{"$oid":"5807a914dcba0f490c71818b"},"id":"1","info":{"etppri":[10,112,10,112,10,14,10,112,10,155,142,50],"etppen":["10","11","12","132","3","2","80","60","55","22","112","15"],"etptho":["10","11","12","132","3","2","80","60","55","22","112","15"],"bh":{"ex":["30","30","30","30","30","20","80","30","35","22","30","35"],"pr":["30","30","30","30","30","20","80","30","35","22","30","35"]}}}]

Answer 1

Renan, use your controller this way to see if it will solve the problem.

.controller('chartEvapo', function($http, $scope) {
    var teste;

    $http
        .get(meurepositorio)
        .success(function(response) {
            $scope.cityOBJ = response;
            atualizaTeste();
        });

    // está função ira atualizar a variável teste para você
    function atualizaTeste() {
        this.teste = $scope.cityOBJ[0].info.etppri;
    }
});

I’m thinking that maybe the mistake happens because of $http and angular.forEach be asynchronous

Answer 2

This happens because the object returned in callback has several properties. The one that interests you is data, which contains the body of the returned response.

Change your code as follows:

$scope.cityOBJ = response.data;

You can find more information regarding the response object here.