Angular2 : read object with unknown key

Question

I want to display a specific value of different objects in a template. The path of the value to display depends of the object.

Here a example :

let obj = {
    "a": "a",
    "b": {
       "1": "1",
       "2": "READ ME"
    }
}

let obj2 = {
    "x": "x",
    "y": {
       "foo": "1",
       "bar": {
           "test": "READ ME"
       }
    }
}

In this example I want to read the value "READ ME" like this obj.b.2 or obj['b']['2'] for the first object. However I don't know where is the READ ME value depending on objects.

To know where is located the value to display, I pass to my tempate a config array with the list of the keys to call: like this :

config = ['b', '2'] // For the first object
config = ['y', 'bar', 'test'] // For the second object

How can I display "READ ME" in my template with my list of keys ?

Teddy Sterne · Accepted Answer · 2017-02-02 13:51:48Z

2

You can use the reduce function to obtain the value. You cannot define functions in your template so the logic will have to live in the component.

Template

{{config.reduce(reduceValue, obj)}}

Component

public reduceValue(object, prop){
    return object ? object[prop] : null;
}

Demo

edited Feb 2, 2017 at 13:51

answered Feb 2, 2017 at 12:12

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

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

Comments

Tim Consolazio · Accepted Answer · 2017-02-02 12:03:54Z

0

Bind to a "getter" instead of directly to an array or object.

<div>{{ getTheRightValue ( ) }}</div>

In your controller:

get theRightValue ( ) {
   // Test objects, determine correct value...
   return theCorrectValue;
}

Other logic in your controller can help determine what "theCorrectValue" is as well, say for instance you get back objects from a service, when they return, do your tests and set "theCorrectValue" to whatever you need. A setter can do this nicely:

set theRightValue ( ) {
  // do your logic, etc...
  theCorrectValue = etc. etc.
}

This way you can bind to results from completely different structures. You just inspect them, set up what you need, and have that returned from the getter.

answered Feb 2, 2017 at 12:03

Tim Consolazio

4,8882 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular2 : read object with unknown key

2 Answers 2

Template

Component

Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Template

Component

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related