Angular 2 concatenate variable in interpolation

Question

I have two related objects:

itemsObj = {
    'item1' : 'A1',
    'item2' : 'A2',
    'item3'  : 'B',
    'item4'  : 'C',
    'item5'  : 'D'
};

And:

itemsObj2 = {
    'A1' : 'Very conservative and up',
    'A2' : 'Conservative and up',
    'B'  : 'Balanced and up',
    'C'  : 'Growth and up',
    'D'  : 'Aggressive'
};

Interpolating {{itemsObj.item1}} will return A1 and {{itemsObj2.A1}} will return Very conservative and up.

How to concatenate itemsObj.item1 with itemsObj2.A1 to return Very conservative and up?

My attempt:

{{itemsObj2.itemsObj.item1}} but of course this is wrong. So may I know how to concatenate in my case?

Do you want to display only one value or display them all and have the possibility to loop over them? — maxime1992
– maxime1992, Commented May 25, 2018 at 10:55

Niladri Basu · Accepted Answer · 2018-05-25 10:55:28Z

2

Do this:

itemsObj2[itemsObj.item1]    //setting itemsObj.item1's value as itemsObj2's key

DEMO:

itemsObj = {
    'item1' : 'A1',
    'item2' : 'A2',
    'item3'  : 'B',
    'item4'  : 'C',
    'item5'  : 'D'
};

itemsObj2 = {
    'A1' : 'Very conservative and up',
    'A2' : 'Conservative and up',
    'B'  : 'Balanced and up',
    'C'  : 'Growth and up',
    'D'  : 'Aggressive'
};

console.log(itemsObj2[itemsObj.item1])

edited May 25, 2018 at 10:55

answered May 25, 2018 at 10:38

Niladri Basu

10.7k7 gold badges59 silver badges65 bronze badges

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

1 Comment

user4676340 Over a year ago

Should be the accepted solution, just for the snippet.

maxime1992 · Accepted Answer · 2018-05-25 10:41:15Z

2

TS

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public items: string[];

  constructor() {
    const itemsObj = {
      'item1': 'A1',
      'item2': 'A2',
      'item3': 'B',
      'item4': 'C',
      'item5': 'D'
    };

    const itemsObj2 = {
      'A1': 'Very conservative and up',
      'A2': 'Conservative and up',
      'B': 'Balanced and up',
      'C': 'Growth and up',
      'D': 'Aggressive'
    };

    this.items = Object
      .values(itemsObj)
      .map(itemKey => itemsObj2[itemKey]);
  }
}

HTML

<div *ngFor="let item of items">
  {{ item }}
</div>

Output:

Very conservative and up
Conservative and up
Balanced and up
Growth and up
Aggressive

Stackblitz demo:

https://stackblitz.com/edit/angular-pbdfux?file=src%2Fapp%2Fapp.component.html

answered May 25, 2018 at 10:41

maxime1992

24k11 gold badges90 silver badges133 bronze badges

9 Comments

user4676340 Over a year ago

Too much for so little. I'd go for Sajeet's solution

maxime1992 Over a year ago

True. But this solution provides a way to loop over it. If OP don't need that fine, otherwise here it is. (I just doubt that with a set of different keys he just want to display one, but maybe)

user4676340 Over a year ago

I agree, but that's not what he asked. Although it's perfectly valid and working code, you're giving an overkill solution, hence my downvote.

maxime1992 Over a year ago

Wow downvote for 3 lines / valid solution. I personally downvote for wrong or very incomplete solutions with a lack of explanations. Not for valid solutions with demo and all ¯\_(ツ)_/¯

user4676340 Over a year ago

And I downvote sot the solution that isn't best suited for a question isn't a the top of the page. To each his own way of voting.

|

Sajeetharan · Accepted Answer · 2018-05-25 10:40:07Z

1

Since you need to match the key , you can do

   <h1> {{itemsObj2[itemsObj.item1]}}</h1>

STACKBLITZ DEMO

answered May 25, 2018 at 10:40

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

Sajeetharan Over a year ago

Guys if you're downvoting anyone add the reason

Sajeetharan Over a year ago

Those who have upvoted my comment, please go further up and upvote answer too :P

user4676340 Over a year ago

Yeah I'm tired of getting downvotes with no explanation, so I only make looooong answers with explanations, so quick downvoters don't even read it (And I upvoted the solution already)

Collectives™ on Stack Overflow

Angular 2 concatenate variable in interpolation

3 Answers 3

1 Comment

9 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related