ngFor over nested map in typescript

Question

I want to iterate over a nested map to get the values out of a list in the second map.

Map:

public groupedItemMap: Map<string, Map<string, ItemSearchResult[]>>;

Map structure:

Map
--[[Entries]]
----0
-------key - number (if occured once or is duplicate)
-------value - Map
---------[[Entries]]
-----------key - itemNumber
-----------value - List of object(s) with parameters 'id',..'name' and so on and same itemNumber

++++++++++++if itemNumber is different there are more objects of the same type with different itemNumber
-----------key
-----------value

I want to access the list of object(s) out of it.

  <!-- Here keyvalue is not possible on groupedItemMap -->
<div *ngFor="let group of groupedItemMap.entries()">   
    <span>{{ group.key }}</span>
    <div *ngFor="let items of group| keyvalue">
        <span>{{ items.key }}</span>
        <div *ngFor="let item of items.value">
            <span>{{ item.id }}</span>
        </div>
    </div>
</div>

If I use it without keyvalue on groupedItemMap I can only access it with 4 *ngFor loops and map.entries() which loops all items in my html tag.

Barremian · Accepted Answer · 2021-01-11 13:54:50Z

1

You possibly need to use keyvalue for both the loops. Try the following

<li class="list-group-item" *ngFor="let first of groupedItemMap">
 <div *ngFor="let second of first | keyvalue">
   <div *ngFor="let item of second.value | keyvalue">
     <!-- Here `item.value` is an array. So you possibly need another *ngFor. Test with `json` pipe -->
     <strong innerHTML="{{ item.key }} x {{ item.value | highlight: highlight }}">
     </strong>
     <span class="text-description margin-bottom-5"
         innerHTML="{{ 'number' | translate }}: {{ item.number|highlight:highlight }}"></span>
   </div>
 </div>

answered Jan 11, 2021 at 13:54

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

1 Comment

internethulk Over a year ago

If I use keyvalue in both loops I will get a compiler error. Still the same error if I added another loop, even with second.value.

Collectives™ on Stack Overflow

ngFor over nested map in typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related