how do I access child elements of JSON in the controller in Angular JS

Question

I don't understand how to wait for the resource call to finish before assigning the data.properties to $scope in my controller.

here is my confusion:

i have a resource call that returns this:

[
{
    "PreAlertInventory": "5.000000",
    "SharesInInventory": "3.000000",
    "TotalSharesSold": "2.000000",
    "TotalMoneySharesSold": "18.000000",
    "TotalSharesBought": "0.000000",
    "TotalShareCost": "0.000000",
    "EstimatedLosses": "0.000000"
}
]

here is the applicable code from the controller:

$scope.alertSwap = function () {

  var data = Data.query(); // gets the data. works as expected

  //$scope.test = data; //works as expected. can access data and properties in template
  $scope.test = data.TotalMoneySharesSold; //does not work. is empty???
}

i can access the array and its properties from the template BUT not from inside the controller.

How do I access the child elements from inside the controller that called the resource?

http://plnkr.co/edit/JnLqq4v7lKlYOHg85Jma?p=preview

answer: thanks to all who helped:

I needed to assign a callback to the resource call, and assign the elements from within the function:

$scope.data = Data.query(myParams, function(data) {
  $scope.test = data[0].TotalSharesBought;
});

please post Fiddle or Plunker to help us to detect the issue. Thanks — Maxim Shoustin
– Maxim Shoustin, Commented Sep 29, 2013 at 7:09
I assume Your data request is async, you need to put a callback and when it finished assign its value to '$scope.testTwo' — lastboy
– lastboy, Commented Sep 29, 2013 at 7:18
Your data would appear to be returned as an array, try $scope.testTwo = data[0].TotalSharesBought — steveukx
– steveukx, Commented Sep 29, 2013 at 7:24

steveukx · Accepted Answer · 2013-09-29 07:51:55Z

1

Your data would appear to be returned as an array, try $scope.testTwo = data[0].TotalSharesBought.

I've updated your Plunkr accordingly.

answered Sep 29, 2013 at 7:51

steveukx

4,34321 silver badges27 bronze badges

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

3 Comments

user2762149 Over a year ago

this is my actual call. how do i incorporate your answer with this? var data = Data.query({TradeID:trade.TradeID, AlertID: alertID});

steveukx Over a year ago

Call Data.query(myJson, callbackFn) where myJson is the JSON your are posting and callbackFn is the function to call with the response data when it's available. The plunkr currently doesn't have a json parameter in the query, but does call back a response function.

user2762149 Over a year ago

Thank you for your help i was seriously over complicating this. answer $scope.data = Data.query(myParams, function(data) { $scope.test = data[0].TotalSharesBought; });

roland · Accepted Answer · 2013-09-29 08:23:30Z

1

As said above it is likely you are fetching those data async. I updated your code to support promise (which makes your code async and may not fit with the rest of the application by the way).

$timeout simulates an async call. In your factory service:

var deferred = $q.defer();
$timeout(function() {
    return deferred.resolve(data);
}, 100); // set it to zero to return immediately
return deferred.promise;

In your controller call you factory factory method query() and hook the response with then, which is the promise part of the snippet:

Data.query().then(function(response) {
  $scope.test = response[0].TotalMoneySharesSold;
});

http://plnkr.co/edit/SGGCVS?p=preview

answered Sep 29, 2013 at 8:23

roland

7,7956 gold badges48 silver badges62 bronze badges

4 Comments

Maxim Shoustin Over a year ago

He loads all his json data to $scope.data but can't parse it. Ther is no async problem

user2762149 Over a year ago

how do i get my factory to return the "response"? this is the factory: .factory('AlertLoss', function($resource){ return $resource('localhost/shfofx/PHP/Rest/alertLossDetails.php', {}, { query: {method:'GET', params:{}, isArray:true} }); });

user2762149 Over a year ago

i got this code working but it still produces the exact same issue as in the post. the entire array loads but I cannot assign individual elements from inside the controller

roland Over a year ago

I might not have fully understood your question, but you didn't mention clearly you want to assign a value inside your controller.

Collectives™ on Stack Overflow

how do I access child elements of JSON in the controller in Angular JS

answer: thanks to all who helped:

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

answer: thanks to all who helped:

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related