Angular 2: Ignore certain values in JSON object with *ngFor loop

Question

I have the following JSON objects:

{VarietyTypeName:"Greens", VarietyFamilyName:"Kale", VarietyName:"Red Russian"},
{VarietyTypeName:"Greens", VarietyFamilyName:"Kale", VarietyName:"Starbor"},
{VarietyTypeName:"Greens", VarietyFamilyName:"Lettuce", VarietyName:"Alkindus"},
{VarietyTypeName:"Fruits", VarietyFamilyName:"Strawberry", VarietyName:"Jewel"}

I'm using the following code to loop through the objects:

<div *ngFor="let variety of varieties">
    <div class="varietyTypeName menu-item-type-header">
        {{variety.VarietyTypeName}}
        <i class="fa fa-angle-down arrow-toggle"></i>
    </div>
    <div class="menu-item-group">
        <div class="varietyFamilyName">{{variety.VarietyFamilyName}}</div>   
        <div class="varietyName">
            <a>{{variety.VarietyName}}</a>                
        </div>
    </div>
</div>

Which ends up looking something like this in the view:

Greens
   Kale
      Red Russian
Greens
   Kale
      Starbor
Greens
   Lettuce
      Alkindus
Fruits
   Strawberry
      Jewel

This is a little redundant and I would like to simplify the view some so it looks more like this instead:

Greens
   Kale
      Red Russian    
      Starbor
   Lettuce
      Alkindus
Fruits
   Strawberry
      Jewel

Basically I want only the first instance of a VarietyTypeName and first instance of a VarietyFamilyName to appear while each VarietyName appears. How can I adjust my *ngFor loop to do that?

Answer 1

You could use the groupBy from lodash.

Here's an example for a similar question.

using lodash .groupBy. how to add your own keys for grouped output?

After that, it's just a matter of applying the *ngFor on each level of the object.