*ngFor keeps accessing 2 seperate arrays with the same name concurrently. I only want to Iterate through one

I am trying to Iterate through an Array. The thing is the data is nested and in an object there are 2 arrays with the same name. I would like to Iterate through only one Array. Angular Iterates through both the Arrays concurrently.

I am trying to access and print the name from the first instance of street_group array only. Angular is print the name from both instances of street_group array concurrently.

Here is the Data

{
    "generated_at": "-",
    "schema": "-",
    "event": {
        "id": "-",
        "scheduled": "-",
        "value": false,
        "timing": {
            "type": "-",
        },
        "season": {
            "id": "-",
            "name": "-",
            "start_date": "-",
            "end_date": "-",
            "year": "-",
        },
        "cycle": {
            "id": "",
            "name": "-",
            "car": {
                "id": "-",
                "name": "-"
            },
            "category": {
                "id": "-",
                "name": "-"
            },
            "type": "-",
            "value": "-"
        },
        "useful": [{
            "id": "-",
            "name": "-",
            "value": "-",
            "value2": "-",
            "value3": "-",
            "value4": "-"
        }, {
            "id": "-",
            "name": "-",
            "value1": "-",
            "value2": "-",
            "value3": "-",
            "value4": "-"
        }],
        "venue": {
            "id": "-",
            "name": "-",
            "city_name": "-",
            "country_name": "-",
            "map_coordinates": "--",
            "country_code": "-",
            "values": [{
                "name": "-"
            }, {
                "name": "-"
            }]
        }
    },
    "section": [{
        "locale": "-",
        "value": {
            "id": "-",
            "name": "-",
            "country_code": "-"
        },
        "street_group": [{
            "id": "-",
            "name": "-",
            "type": "-",
        }, {
            "id": "-",
            "name": "-",
            "type": "-",
        }, {
            "id": "-",
            "name": "-",
            "type": "-",
        }
        ]
    }, {
        "locale": "-",
        "value": {
            "id": "-",
            "name": "-",
            "country_code": "-"
        },
        "street_group": [{
            "id": "-",
            "name": "-",
            "type": "-",
        }, {
            "id": "-",
            "name": "-",
            "type": "-",
        }, {
            "id": "-",
            "name": "-",
            "type": "-",
        }
        ]
}]
}

Here is My Component

export class LiveComponent implements OnInit {
 allData: {
    generated_at: string;
    section: {
      street_group: { name: string }[];
      locale: string }[];
    event: {
      id: string;
      useful: { name: string }[];
    };
  }[] | null = null;

    constructor(private http: HttpClient ) {
    }
    ngOnInit(){
this.http.get('http://api.redacted_for_privacy').subscribe(data => {this.allData = [data as any];});
    }
    }

This is my HTML

<mat-tab-group>

<mat-tab *ngFor="let data of allData" label="{{data.event.useful[0].name}}">

>! The part below is broken

<div class="content">
  <mat-list role="list" *ngFor="let section of data.section">
    <mat-list-item role="listitem" *ngFor="let street_group of section.street_group | slice:0:2">{{street_group.name}}</mat-list-item> 

  </mat-list>
  
</div>


    </mat-tab>
    
  </mat-tab-group> 

I have tried adding an Index number to the Section Array since it is the containing array but that breaks the code.

<mat-list role="list" *ngFor="let section of data.section[0]">

Where of gives this error
Type '{ street_group: { name: string; }[]; }' is not assignable to type 'NgIterable<any> | null | undefined'.ngtsc(2322)

I was expecting only the first Array to render.

If I understand your question correctly, you don't need a two-dimensional loop (double *ngFor), but a single one on the 0th element.

To print all the names from the first element of section array:

• Remove the outer *ngFor directive on mat-list

Only loop through the 0th element of the section inside mat-list-item

Your HTML could look like:

<mat-list role="list">
  <mat-list-item
    role="listitem"
     *ngFor="let street_group of data.section[0].street_group"
    >{{ street_grp.name }}</mat-list-item
  >
</mat-list>

notice *ngFor="let street_grp of data.section[0].street_group" to iterate only the elements in data.section[0];

It should also be mentioned here that it can sometimes be useful to flatten nested data. This simplifies access and manipulation of the data.

There is no pipe for your purpose available in Angular. I suggest doing a mapping that will concatenate street_groups in all sections.

// Will output all street_groups in one array
data.section.map((section) => section.street_group).flat()