CODEWITHSUNDEEP
javascriptangularjs
Sofia Lunkes
Sofia Lunkes

Reputation: 87

Access object of another object

I want to access object which is inside another object, but it shows 'undefined' whenever I console it. Example

$scope.instrumento = new Instrumento();

$scope.empresaInstrumento = EmpresaInstrumento.get({id:$routeParams.id}, function (instrumento) {
   $scope.instrumento = instrumento.instrumento;
    console.log($scope.instrumento);

});
console.log($scope.instrumento);

How can i get this object "instrumento" out of the "empresaInstrumento" without losing his reference?

(the get method retrieves information from api)

Upvotes: 1

Views: 73

Answers (4)

Sofia Lunkes
Sofia Lunkes

Reputation: 87

as Maher said there, i used the local variable to catch the response, and then i was able to save that information calling a named function inside the callback to send to an $scope variable created in the function using the local variable.

something like this:

$scope.empresaInstrumento = function () {
        empresaInstrumento.get({ id: routeParams.id }, function (instrumento) {
            $scope.instrumento = instrumento.instrumento;
            $scope.loadInstrumento($scope.instrumento);
        });
    }
    
    
    $scope.loadInstrument = function loadInstrument(element) {
      $scope.instrumento = element;
    }

So when i request that information, it shows correctly in the HTML

Upvotes: 0

gyc
gyc

Reputation: 4360

I'm guessing you don't see the scope value being updated in your html page and you added the console.logs to test whether the value is correctly set or not.

You have 2 problems:

1- The second console.log will be executed before the API call returns any data. That's why you get undefined. (the first log should display the correct value though because it's inside the promise block.

2- Depending on how EmpresaInstrumento.get is coded, it might be a case where you need to update the scope values with $scope.$apply();

$scope.instrumento = new Instrumento();

$scope.empresaInstrumento = EmpresaInstrumento.get({id:$routeParams.id}, function (instrumento) {
   $scope.instrumento = instrumento.instrumento;
    console.log($scope.instrumento);
    $scope.$apply(); // update the scope and your view
});
console.log($scope.instrumento); // still undefined here

If however the first console.log shows undefined, you have a problem with your service and we need to see how it's coded to debug it.

Upvotes: 1

Maher
Maher

Reputation: 2547

In your code you didn't have function to run inside the $scope.empresaInstrumento, you have to make it as function and then call it from controller or view as ng-init, see the sample

app.controller("ctrl", ["$scope", "EmpresaInstrumento", "$routeParams", function ($scope, empresaInstrumento, routeParams) {
    $scope.instrumento = {};

    $scope.empresaInstrumento = function () {
        empresaInstrumento.get({ id: routeParams.id }, function (instrumento) {
            $scope.instrumento = instrumento.instrumento;
            console.log($scope.instrumento);
        });
    }

    $scope.empresaInstrumento(); //or in ng-init="empresaInstrumento()"

    console.log($scope.instrumento);
}]);

Upvotes: 1

Laazo
Laazo

Reputation: 467

This is because the function empresaInstrumento does not have a property named instrumento.

With that said, a better approach would be to do the following;

$scope.instrumento = new Instrumento();

$scope.empresaInstrumento = {
 // create an instrumento property
   instrumento:  function() {
      var toReturn = {};
      EmpresaInstrumento.get({id:$routeParams.id}, function (instrumento) {
           toReturn = instrumento.instrumento;
        });

      return toReturn;
    }
}
console.log($scope.empresaInstrumento.instrumento());

Upvotes: 0

Related Questions