Recently, I developed an Angular factory specifically designed for fetching JSON data. Utilizing the $resource alongside the get method has allowed me to successfully retrieve a JSON object from the server. Within this object are multiple child objects that I need to access.
However, upon attempting to utilize the retrieved data within my controller by calling the $scope variable, I encountered an issue that presented itself in the form of:
Cannot read property propertyName of undefined.
Oddly enough, I was able to read the property when logging it to the console but faced difficulties when trying to reference another variable as a diagnosis technique.
The root of the problem lies in the fact that despite being able to locate the object and its keys via console logging, when utilizing this data, the object keys end up becoming undefined. The cause behind this peculiar behavior remains elusive.
NewOrder.get({"id": $stateParams.loopId, "orderId": $stateParams.orderId}).$promise.then(function(order) {
$scope.myData = order["data"];
console.log("this is an order", order);
});
Presented below is the factory utilized:
angular.module('myApp')
.factory('NewOrder', function($resource) {
return $resource('/api/loops/:id/orders/:orderId');
});
A noteworthy discovery I made was that creating a new variable and assigning it the value of myData resulted in the object inside my key disappearing.
The following approach seemed to work without any issues:
$scope.getOrder = function() {
console.log($scope.myData);
}
=> Object {recruitingLeague: "NAHL", playerPosition: "LeftDefense", playerDOB: Object, playerHeight: Object, playerWeight: Object…}
On the other hand, attempting to create a new variable and then passing the value of the preceding variable (for diagnostic purposes) didn't yield positive results.
$scope.newData = $scope.myData;
$scope.getOrder = function() {
console.log($scope.newData);
}
=> undefined
The sudden disappearance of the objects retrieved from the server continues to baffle me.