Reputation: 87
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
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
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
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
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