Trying to iterate an array of objects in angular

Question

Problem: Trying to iterate an array of objects in angular but only appears the first one. The service works, I'm getting the full response.

The angular service where I execute a get for all the assets:

getAsset(asset_type):Observable<Asset[]>{

      return this.http.get<Asset[]>(`${this.find}/${this.domain_id}/assets?asset_type=${asset_type}`, httpOptions);
    }

The model of the Asset

export class Asset{
    asset_name: string;
    mac_address: string;
    floor: number;
    location: string;
    temperature: number;
    battery: number;
    timestamp_tlm: string;
    timestamp_geo: string;
}

The component.ts where i call the service and send the corresponding parameter.

ngOnInit() {
    this.whereisService.getAsset(this.asset_type).subscribe(assets => {

      if(Array.isArray(assets)){
        this.assets = assets;
      }
      else if(typeof assets === 'string' ){
        this.assets = [];
      }
      else{
         this.assets = [assets];
      }


   });
  }
}

The component.html

<div class="text-center">
    <ul id="ticket" class="list-unstyled my-2">
        <li class="btn w-100 bg-primary text-center text-white mx-0 my-2 display-block" *ngFor="let asset of rows_transformed let i = index">       
            <p class="h5"> Name: {{ asset?.asset_name }}</p>
            <p class="h5"> Tipo: {{ asset?.asset_type }}</p>
            <p class="h5"> Mac adress: {{ asset?.mac_address }}  </p>
            <p class="h5"> Piso: {{ asset?.floor }} </p>
            <p class="h5"> Localização: {{ asset?.location }} </p>
            <p class="h5"> Hora: {{ asset?.timestamp_tlm }} </p>
        </li>
    </ul>
</div>

Response JSON from API

{
    "code": 200,
    "data": [
        {
            "mac_address": "AC233F52BD17",
            "floor": -3,
            "asset_name": "Tripés microfone 1",
            "asset_type": "Carro trasnporte",
            "location": "Armazem 2",
            "temperature": 22.0,
            "battery": 74.0,
            "timestamp_tlm": "2019-11-22 10:17:49.563121+00:00",
            "timestamp_geo": "2019-11-22 10:17:49.563266+00:00"
        },{...}
    ]
}

After subscribing, this.whereisService.getAsset(this.asset_type).subscribe(assets => {.... console.log(assets); Are you able to see the response here? — Gangadhar Gandi
– Gangadhar Gandi, Commented Nov 22, 2019 at 11:24
Where is **rows_transformed ** array? *ngFor="let asset of rows_transformed let i = index" — Leandro
– Leandro, Commented Nov 22, 2019 at 11:27

JB Nizet · Accepted Answer · 2019-11-22 11:36:58Z

The JSON response doesn't match with what you expect. Start by simplifying your component. The service is supposed to return an Observable<Asset[]>. So the component shouldn't test to see if the emitted event is an array or a string. It's supposed to be an array of assets. If it's not, then the service should be fixed:

this.whereisService.getAsset(this.asset_type).subscribe(assets => this.assets = assets);

Then, you need to fix the service. What the server returns is not an array. It's an object with a data property, which is an array of assets. So the service should be

getAsset(asset_type): Observable<Asset[]>{
  return this.http.get<{ data; Asset[]; }>(`${this.find}/${this.domain_id}/assets?asset_type=${asset_type}`, httpOptions).pipe(
    map(object => object.data)
  );
}

Since the methods allows getting an arra of assets, it should also be named getAssets(), not getAsset(). When one sees a method getAsset(), one expects to get back one asset, not an array of assets.

And finally, since the array is stred in the property assets and not rows_transformed, the template should iterate through that array:

*ngFor="let asset of assets; index as i"

dreadcrumb · Accepted Answer · 2019-11-22 11:29:58Z

0

Use

*ngFor="let asset of assets"

in your Html instead of rows_transformed. Also you can scrap i as you are not using it.

answered Nov 22, 2019 at 11:29

dreadcrumb

1911 silver badge10 bronze badges

Collectives™ on Stack Overflow

Trying to iterate an array of objects in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related