CODEWITHSUNDEEP
angular
Ramlal S
Ramlal S

Reputation: 1653

*ngFor - Loop iteration is not happening. Only one element of the object is displaying instead of all (in Angular 12)

My array of objects is not looping in the UI. Only one element I can able to get. What am I doing wrong? Please help to rectify this.

my component.html file as follows:

<div class="card" *ngFor="let regionList of regionLists; let i = index" [attr.data-index]="i">
  <div class="card-body">
    {{ regionList.output.list[i].region }}
  </div>
</div>

my componnent.ts - I have given two objects for demo purposes where I need to display regions i.e ouput should have 2 cards where i'm getting only one

import { query } from '@angular/animations';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'apiDemoApp';
  query:string;
  regionLists:any[];

  
constructor(){
  this.query="ramlal";
  this.regionLists=[{
    "transactionId":"abc",
    "output":{
       "list":[
          {
             "region":"Africa",
             "apis":[
                {
                   "name":"Address Validation",
                   "status":"Operational",
                   "time":"98%",
                   "sec":"160ms"
                },
                {
                  "name":"Address Validation",
                  "status":"Operational",
                  "time":"98%",
                  "sec":"160ms"
               }, {
                "name":"Address Validation",
                "status":"Operational",
                "time":"98%",
                "sec":"160ms"
             },

                {
                   "apiName":"Locations",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Pickup",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Track",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Rate",
                   "rateSubApis":[
                      {
                         "apiName":"Rate Express",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate Freight",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate Ground",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate SmartPost",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      }
                   ]
                },
                {
                   "apiName":"Ship",
                   "shipSubApis":[
                      {
                         "apiName":"Ship Express",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship Freight",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship Ground",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship SmartPost",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      }
                   ]
                }
             ]
          },
          {
             "region":"Americas and Caribbean",
             "apis":[
                {
                   "apiName":"Address Validation",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Locations",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Pickup",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Track",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Rate",
                   "rateSubApis":[
                      {
                         "apiName":"Rate Express",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate Freight",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate Ground",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate SmartPost",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      }
                   ]
                },
                {
                   "apiName":"Ship",
                   "shipSubApis":[
                      {
                         "apiName":"Ship Express",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship Freight",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship Ground",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship SmartPost",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      }
                   ]
                }
             ]
          },
        
       ],
       "userRegion":"Indian Sub-Continent",
       "Country":"India"
    }
 }]
}
}

Output:

output

Expected output: Two cards as per objects in array

Upvotes: 0

Views: 852

Answers (3)

Ramlal S
Ramlal S

Reputation: 1653

This works for me as taken helpful answers given. Thanks

    <div  *ngFor="let regionList of regionLists; let i = index" [attr.data-index]="i">
      <div class="card" *ngFor="let listItem of regionList.output.list">
        <div class="card-body">
         <ng-container >
            {{ listItem.region }}
         </ng-container>
        </div>
      </div>
    </div>

Upvotes: 0

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9953

You have two dimensional array but you have used one ngFor, so you need nested ngFor like this:

<div class="card" *ngFor="let regionList of regionLists; let i = index" [attr.data-index]="i">
    <div class="card-body">
        <div *ngFor="let list of regionList.output.list">
            {{ list.region }}
        </div>
    </div>
</div>

Upvotes: 1

Lukasz Gawrys
Lukasz Gawrys

Reputation: 1334

You should have the second loop for the lists.

<div class="card" *ngFor="let regionList of regionLists; let i = index" [attr.data-index]="i">
  <div class="card-body">
   <ng-container *ngFor="let listItem of regionList.output.list">
      {{ listItem.region }}
   </ng-container>
  </div>
</div>

Upvotes: 2

Related Questions