Angular, display array in array using service

Question

I get all data json from ws like this:

{
  "StatusCode":0,
  "StatusMessage":"OK",
  "StatusDescription":   
   [
      {"homeboxpackage_id":"1",
        "active":0,
        "homebox_id":"11",
        "serial_number":"serialn1",
        "user_id":"31", 
        "sensors": { 
              "0":{
                    "sensor_serial":"sensorserial1",
                    "sensors_id":"11E805BA6732C3DB"
              }, 
              "1":{
                    "sensor_serial":"sensorserial2", 
                    "sensors_id":"11E805BA6F1E6CE9"
              }, 
              "2":{
                    "sensor_serial":"sensorserial3", 
                    "sensors_id":"11E805BA7716C775"
              }
        }
    }
  ]

In html code, I want to display data sensors in list, but dosn't show. My html code:

  <table class="bordered table-bordered" [mfData]="homeboxsp | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
    [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
    <thead>
      <tr>
        <th>
          <mfDefaultSorter by="serial_number">Serial Number</mfDefaultSorter>
        </th>
        <th>
          <mfDefaultSorter by="sensors">Sensor Serial</mfDefaultSorter>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of homeboxsp">
        <td>{{item.serial_number}}</td>
        <ul>
          <li>{{item.sensors}}</li>
        </ul>
        <td>{{item.active}}</td>
     </tr>
    </tbody>
   </table>

homeboxsp is in component.ts

 this.ws.homeboxPGetAll().subscribe(
      homeboxsp => {
        this.homeboxsp = homeboxsp; // in console display all my array in array
           }
    );

image

[1]: https://i.sstatic.net/QxRTr.png

Thank you

Sajeetharan · Accepted Answer · 2018-01-31 09:03:59Z

3

You need another ngFor to loop sensor objects

<tr *ngFor="let item of homeboxsp">
        <td>{{item.serial_number}}</td>
        <ng-container *ngFor= "let sensor of item.sensors">
        <ul>
          <li>{{sensor.sensors_id}}</li>
        </ul>
        <td>{{item.active}}</td>
</tr>

answered Jan 31, 2018 at 9:03

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

A. B Over a year ago

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. :(

Sajeetharan Over a year ago

post your json array

A. B Over a year ago

{"StatusCode":0,"StatusMessage":"OK","StatusDescription": [{"homeboxpackage_id":"1","active":0,"homebox_id":"11","serial_number":"serialn1","user_id":"31", "sensors":{ "0":{"sensor_serial":"sensorserial1", "sensors_id":"11E805BA6732C3DB"}, "1":{"sensor_serial":"sensorserial2", "sensors_id":"11E805BA6F1E6CE9"}, "2":{"sensor_serial":"sensorserial3", "sensors_id":"11E805BA7716C775"}}}]

Sajeetharan Over a year ago

you need to change the response as array, in this sensors is an object

Sajeetharan Over a year ago

did you sort this issue?

|

Pramod Patil · Accepted Answer · 2018-01-31 09:43:11Z

0

You need to parse response as a json in order to use actual response body. res.json will extract the body data and return it to the subscribe. Make sure you import rxjs library first.

//import { Http, Headers, RequestOptions, Response } from '@angular/http';
  //import { Observable } from 'rxjs';
  //import 'rxjs/add/operator/map';

this.ws.homeboxPGetAll().map((res:Response) => res.json()).subscribe(
  homeboxsp => {
    this.homeboxsp = homeboxsp.sensors;
       }
);

answered Jan 31, 2018 at 9:43

Pramod Patil

2,7632 gold badges16 silver badges20 bronze badges

1 Comment

A. B Over a year ago

ws is this: public homeboxPGetAll(): Observable<HomeboxP[]> { let headers = new Headers(); headers.append('x-access-token', this.auth.getCurrentUser().token); return this.http.get(Api.getUrl(Api.URLS.homeboxPGetAll), { headers: headers }) .map((response: Response) => { let res = response.json(); if (res.StatusCode === 1) { this.auth.logout(); } else { return res.StatusDescription.map(homeboxP => { return new HomeboxP(homeboxP); }); } }); }

Collectives™ on Stack Overflow

Angular, display array in array using service

2 Answers 2

7 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Related