How to Bind to Variable Length Property in AngularJS

Question

I have a table which is going to display results sent from the server, however the results themselves have a dynamic shape. There is also another API which provides the shape / schema of the nesting. So my HTML looks something like this:

 <tr ng-repeat="result in results">
     <td ng-repeat="path in schema.paths">{{result[path]}}</td>
 </tr>

Of course, this does not work since path may be one item, or it may be many items expressed as a dotted string. That is, path could be nesting1 which would work, or it could be nesting1.nesting2.nesting3 which would not work. How can I accommodate this use case without using the $compile service in JavaScript?

Andrew Lahikainen · Accepted Answer · 2019-01-13 04:09:06Z

1

If I understand this question correctly, I think there is a Lodash function that can help you here.

It's called get. Usage:

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3

_.get(object, ['a', '0', 'b', 'c']);
// => 3

_.get(object, 'a.b.c', 'default');
// => 'default'

For your case it might look something like:

controller.js

import { get } from 'lodash-es';

...

// Your controller code...

...

    this.getResultAtPath = path => get(this.results, path);

template.html

<tr ng-repeat="result in results">
     <td ng-repeat="path in schema.paths">{{ getResultAtPath(path) }}</td>
</tr>

If you don't want to take on the dependency, I suggest you take a look at their implementation for get.

answered Jan 13, 2019 at 4:09

Andrew Lahikainen

3701 silver badge9 bronze badges

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

2 Comments

mobiusinversion Over a year ago

Great thank you, I rolled my one as a basic map walk along the lines of: function getNestedMapItem(path, data) { var pointer = data for(var i = 0; i < path.length; i++) { var item = path[i] pointer = pointer[item] } return pointer }

Andrew Lahikainen Over a year ago

@mobiusinversion nice :)

Kate Chumbarova · Accepted Answer · 2019-01-13 04:58:58Z

0

As mentioned above, get function should work. Alternatively you could flatten your 'result'. For example if there is an object: {'a': {'b': 3}} then flattened it would look like so: {'a.b': 3}

There are lots of implementations posted here, for example: flatten nested object

answered Jan 13, 2019 at 4:58

Kate Chumbarova

361 bronze badge

Collectives™ on Stack Overflow

How to Bind to Variable Length Property in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related