angular How to access dynamic multiple level data?

Question

I have some data that I would like to loop through with ngRepeat and access data dynamically that's either on the top level or nested under a couple of levels.

However, it seems like I can get the top level properties to show up, but not when its nested.

JS:

var mapping = [
    {property:'a'}, // works
    {property:'b.c1'}, // doesn't work
    {property:'b.c2'}  // doesnt work
];

var arr = {
    a: 'text',
    b: {
        c1: 'text2',
        c2: 'text3'
    }
};

HTML:

<div ng-repeat="mappingItem in mapping">
    <p>{{arr[mappingItem.property]}}</p>
</div>

did u try this? var mapping = [ {property:'a'}, {property:'b['c1']'}, {property:'b.['c2']'} ]; — Divya MV, Jun 02 '15 at 08:25
if you use arr['b.c1'] it wont work but if you use arr['b'].c1 then it works — Keval Bhatt, Jun 02 '15 at 09:03
This might help if changing the structure is not an option http://stackoverflow.com/questions/6906108/in-javascript-how-can-i-dynamically-get-a-nested-property-of-an-object — Divya MV, Jun 02 '15 at 09:25

noj · Accepted Answer · 2015-06-02T09:27:58.610

1

You can use angular's $parse service to evaluate the expression against arr:

$scope.map = function(property) {
    return $parse(property)(arr);
};

<div ng-repeat="mappingItem in mapping">
    <p>{{map(mappingItem.property)}}</p>
</div>

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

edited Jun 02 '15 at 09:27

answered Jun 02 '15 at 09:19

noj

6,740
1
25
30

Thanks that's exactly what I needed! – muudless Jun 02 '15 at 23:22

score 0 · Answer 2 · answered Jun 02 '15 at 08:47

I doubt your approach will work. Reason being the way you are trying to access the object is incorrect, i.e.: arr[mappingItem.property] will become arr['b.c1'] but your object doesn't have a key 'b.c1'. @DivyaMV's suggestion won't work either because property b in the mapping isn't an object hence it doesn't have a key c1. I'd suggest you either change the structure of your object OR you change how you are trying to access your object i.e. use ng-if to check for multiple levels, OR instead of looping, display the properties one by one

Keval Bhatt · Answer 3 · 2015-06-02T12:41:59.200

0

If you use {"property":"b","chiled":"c1"} type of structure then it works.

var mapping = [
    {property:'a'}, 
    {"property":"b","chiled":"c1"},// works
    {property:'b.c2'}  
];


 <div ng-repeat="mappingItem in mapping">
    <p>{{arr[mappingItem.property][mappingItem.chiled]}}</p> <!-- it works for second object-->
 </div>

edited Jun 02 '15 at 12:41

answered Jun 02 '15 at 09:10

Keval Bhatt

6,224
2
24
40

Won't this return `undefined` for first object? – Sylvan D Ash Jun 02 '15 at 12:17
yes i actually given example for nested json iteration so only second object work its just an simple example to iteration nested json so its on you to decided how i construct your json – Keval Bhatt Jun 02 '15 at 12:40

angular How to access dynamic multiple level data?

3 Answers3