Render angular2 HashMap<String,String<List>>

Question

I have a problem when I try to print a HashMap>

Last week I have a question about grouping two fields with Java 8 that I solved here , now I don't find anything about how to print the response of project in angular2.

The response that I receive is this.

https://jsoneditoronline.org/?id=de29279e1eaa495188c36169ae9a23ce

With angular2 I have the following component

ngOnInit() {
    this.matchesService.getMatches()
                        .subscribe(
                        data => {
                            this.matches = data;
                        console.log(this.matches["Alemania[EN]"]["ACB[EN]"][0]);
                          },
                      )
  };

This component print correctly the response in the console but I don't know how to render.

In html I put this

{{this.matches}} 

and I print the following object

[[object Object]]

I need to render the object correctly.

Answer 1

try to use keyvalue pipe:

<p>
    Map looping template side (keyvalue pipe) :
</p>

<ul>
  <li *ngFor="let recipient of map | keyvalue">
    {{recipient.key}} -->
      <span *ngFor="let item of recipient.value | keyvalue">
        {{item.key}}
        <span *ngFor="let element of item.value">
          <ul>
            <li>{{element.id}}</li>
          </ul>
        </span>
      </span>
  </li>
</ul>

DEMO.

Answer 2

This behavior is correct.

If matches is a list you can use *ngFor. Its work like a loop, in html. Then you can print each value.

Please read this: https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor

(You dont have to use this key word in html)