Traverse object in scope from another scope?

Question

I'm not sure how to word this, so please bear with me..

On my main controller, I have a large object containing a bunch of nested geographic information that can be traversed with dot notation like so...

$scope.cData = //large object pulled in from service

// In the view, I can call the entire object or traverse it to return JSON
{{cData}} // Entire object
{{cData.United_States}} // US Data only
{{cData.United_States.Southwest}} // Southwest region only
{{cData.United_States.Southwest.Texas}} // Texas state only

In a child controller, I have a scope that is built up with a bunch of inputs on a UI. So depending on which choices the user has made, all of the variables are watched and concatenated to a controller scope. Based on what the user has chosen, the watch function will alter the "query" variable:

$scope.companyData = "United_States.Southwest"; // User chooses southwest

So the question is, how can i make companyData pass as arguments to the cData object in the view? An incorrect way of looking at it would be like this:

{{$parent.cData + {{companyData}} }}

In other words, I want to use the companyData scope variable to reference where to traverse into the cData scope variable.

Alexander Kalinovski · Accepted Answer · 2014-04-03 18:23:31Z

4

I think using approach proposed by alexsanford1 you can improve this using AngularJS functionality:

inject $parse in your controller and then this function will look something like this:

$scope.getNestedProperty = function(obj, propertyExpr) {
    return $parse(propertyExpr)(obj);
}

answered Apr 3, 2014 at 18:23

Alexander Kalinovski

1,4291 gold badge13 silver badges19 bronze badges

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

3 Comments

alexsanford1 Over a year ago

Nice! This solution is much cleaner :)

sdawson26 Over a year ago

Wow, this is incredible! Thank you very much!

sdawson26 Over a year ago

Alexander, is there an easy way to have the value from this function always update a scope variable? For instance, $scope.datavalues = getNestedProperty($parent.cData, companyData) I suppose a watch function or something will do the trick? This way, If i use {{datavalues}}, it will update just like {{getNestedProperty(a,b)}} . Does that makes sense?

Community · Accepted Answer · 2017-05-23 12:16:36Z

3

I would suggest defining a function on the scope that does this. You will need to split the string on the dot character and iteratively access nested attributes. I don't think there's a one-liner for that, but check out this post for a function that will work.

It should look something like:

// Function taken from post referenced above
$scope.getDescendantProp = function(obj, desc) {
  var arr = desc.split(".");
  while(arr.length && (obj = obj[arr.shift()]));
  return obj;
}

And in the HTML:

{{ getDescendantProp($parent.cData, companyData) }}

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Apr 3, 2014 at 18:11

alexsanford1

3,7771 gold badge21 silver badges23 bronze badges

3 Comments

Alexander Kalinovski Over a year ago

Don't reinvent the wheel. This functionality is already implemented in AngularJS.

sdawson26 Over a year ago

alexsanford1, This is great input. Thank you!

Alexander Kalinovski Over a year ago

Though the implementation was not efficient the idea was good.

Collectives™ on Stack Overflow

Traverse object in scope from another scope?

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related