Bind Array to table in Angular

Question

I am unable to bind data to table using Angular.

Below is my html component

<tr *ngFor="let objscan of scanList">

            <td>{{ objscan.ContainerID }}</td>
            <td>{{ objscan.ContainerNo}}</td>
            <td>{{ objscan.Size}}</td>
            <td>{{ objscan.Type}}</td>
            <td>{{ objscan.ScanningType}}</td>
 </tr>

component typescript

scanList: any = []; 
    constructor(public http: Http, private _router: Router, private _scanService: ScanService) {
        this.getScannedList();
    }

    getScannedList() {
        this._scanService.getScannedList().subscribe(
            data => {
                this.scanList = data;

           },
            err => console.error(err),
            () => console.log(this.scanList)
        );
    }

In scanList I am getting array in console.Please check below image

service typescript

export class ScanService {
    myAppUrl: string = "";

    constructor(private _http: Http, @Inject('BASE_URL') baseUrl: string) {
        this.myAppUrl = baseUrl;
    }

    getScannedList() {
        return this._http.get(this.myAppUrl + 'api/ScanningList/Index')
            .map((response: Response) => response.json())
            .catch(this.errorHandler);
    }
}

Reponse Payload

[{"containerID":3,"containerNo":"MSCU1234567","igmNo":null,"size":"20","type":"GP","isoCode":null,"cfsCode":null,"scanningType":"Fixed","scanningDateTime":null,"scanningResult":null,"customScannerRemark":null,"cfsCustomRemark":null,"scannerLocation":null,"isScanningDone":0,"scannerCustom_ID":0,"cfsCustom_ID":0,"createdDt":"0001-01-01T00:00:00","updatedDt":"0001-01-01T00:00:00","terminalName":null,"vesselName":null,"voyageNo":null,"cargoDecription":null,"consigneeName":null,"scanImage1":null,"scanImage2":null,"scanImage3":null,"scanImage4":null,"scanImage5":null,"scanImage6":null,"cgoImage":null}]

you are creating a 2D array . remove the this.scanList = Array.of(this.scanList); as your data is already an array of objects — CruelEngine
– CruelEngine, Commented Sep 10, 2018 at 8:03
Previously i had removed, but not able to bind data and then i tried by Array.of(this.scanList) but nothing change — Manish Goswami
– Manish Goswami, Commented Sep 10, 2018 at 8:06
you have an array of array you ngFor works on array of objects, change that — Rahul Singh
– Rahul Singh, Commented Sep 10, 2018 at 8:09
Yes Rahul i had removed, but still same result.Nothing change — Manish Goswami
– Manish Goswami, Commented Sep 10, 2018 at 8:11

Aarsh · Accepted Answer · 2018-09-10 08:32:52Z

[{"containerID":3,"containerNo":"MSCU1234567","igmNo":null,"size":"20","type":"GP","isoCode":null,"cfsCode":null,"scanningType":"Fixed","scanningDateTime":null,"scanningResult":null,"customScannerRemark":null,"cfsCustomRemark":null,"scannerLocation":null,"isScanningDone":0,"scannerCustom_ID":0,"cfsCustom_ID":0,"createdDt":"0001-01-01T00:00:00","updatedDt":"0001-01-01T00:00:00","terminalName":null,"vesselName":null,"voyageNo":null,"cargoDecription":null,"consigneeName":null,"scanImage1":null,"scanImage2":null,"scanImage3":null,"scanImage4":null,"scanImage5":null,"scanImage6":null,"cgoImage":null}]

You are getting this in your scanlist so there is silly typo mistake.

Do it like this in your html.

<tr *ngFor="let objscan of scanList">

            <td>{{ objscan.containerID }}</td>
            <td>{{ objscan.containerNo}}</td>
            <td>{{ objscan.size}}</td>
            <td>{{ objscan.type}}</td>
            <td>{{ objscan.scanningType}}</td>
 </tr>

End · Accepted Answer · 2018-09-10 08:32:28Z

I think that your HTTP request is completing after you template is rendered. Try using the async pipe and an *ngIf to wait for it to be completed before rendering the table.

So return the observable from your service that has yet to complete:

public scanList$; 
constructor(public http: Http, private _router: Router, private _scanService: ScanService) {
    this.getScannedList();
}

getScannedList() {
    this.scanList$ = this._scanService.getScannedList();
}

Then in your template use the async pipe subscribe to the observable there and set it as scanList in your template.

<table *ngIf="listScan$ | async as listScan">
  <tr *ngFor="let objscan of scanList">
    <td>{{ objscan.ContainerID }}</td>
    <td>{{ objscan.ContainerNo}}</td>
    <td>{{ objscan.Size}}</td>
    <td>{{ objscan.Type}}</td>
    <td>{{ objscan.ScanningType}}</td>
 </tr>
<table>

Tolui Davaasuren · Accepted Answer · 2018-09-10 08:43:04Z

Angular code looks like OK I think your returned Array from getScannedList is wrong formatted

Array must be formatted like this

scanList = [
  {ContainerID:"id1", ContainerNo:"ContainerNo1",Size:"size1", Type:"type1", ScanningType:"scanningType1"},
  {ContainerID:"id2", ContainerNo:"ContainerNo2",Size:"size2", Type:"type2", ScanningType:"scanningType2"},
  {ContainerID:"id3", ContainerNo:"ContainerNo3",Size:"size3", Type:"type3", ScanningType:"scanningType3"}
];

OR just try following code (set this.scanList from data[0])

    getScannedList() {
        this._scanService.getScannedList().subscribe(
            data => {
                this.scanList = data[0];

           },
            err => console.error(err),
            () => console.log(this.scanList)
        );
    }

Collectives™ on Stack Overflow

Bind Array to table in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related