Question 161476 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can I iterate through only one array with *ngFor when both arrays have the same name?

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 | null | undefined’.ngtsc(2322)

I was expecting only the first Array to render.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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()
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search