AngularJS - Access JSON object associated to a model

Question

I have a service that returns JSON, assume this is the response:

{
    "model": 48870,
    "id": 20
}

I can do this:

$scope.response = Service.get();

And it will assign the JSON response to $scope.response. The issue here is I cannot directly access model or id via $scope.response.model or $scope.response.id, respectively. My workaround for this situation is to define a function in the service's success callback and fetch model or id from data. But this is not very practical considering $scope.response contains the entire JSON object and should in theory (and the sake of clean code) let me access its children.

Two questions here:

Is it a limitation of AngularJS representation of models?
How can I point to children (even grandchildren) without having to define a success callback for each call?

1. Nope, there is no such limitation in AngularJS. 2. Depends on how you are using this model: html-template data-binding OR controller code. In case of latter, you'll definately have to make sure that $scope.response.model is loaded before using it (e.g., success callback), otherwise you'll be getting a ReferenceError. — John Doe
– John Doe, Commented Nov 17, 2012 at 21:40
What does your Service.get() look like? If you are using $http.get or something similar, this is probably an issue related to that function returning a Promise and not the actual JSON. This can be compounded by the fact that promises are "recognized by the templating engine in angular, which means that in templates you can treat promises attached to a scope as if they were the resulting values." $q — Ryan O'Neill
– Ryan O'Neill, Commented Nov 17, 2012 at 22:46
One of you should provide his comment as an answer so I can accept it. Both are correct and valid to me. — Aziz Alfoudari
– Aziz Alfoudari, Commented Nov 18, 2012 at 11:30

vsp · Accepted Answer · 2013-01-29 18:15:07Z

1

Once the asynchronous HTTP call returns, it is safe to access response's properties directly.

See this short example

app.controller('MainCtrl', function($scope, $resource) {
  $scope.data = $resource('data.json').get(function() {
    $scope.loaded = true;
    //now it's safe to access $scope.data's properties:
    $scope.data.foo = $scope.data.id + ':' + $scope.data.model;
  });
});

UI bindings will work automatically.

answered Jan 29, 2013 at 18:15

vsp

9167 silver badges15 bronze badges

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

Comments

mstreffo · Accepted Answer · 2012-11-17 20:51:37Z

0

I think what you are looking for is described here:

http://docs.angularjs.org/tutorial/step_05

answered Nov 17, 2012 at 20:51

mstreffo

8053 gold badges9 silver badges21 bronze badges

Collectives™ on Stack Overflow

AngularJS - Access JSON object associated to a model

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related