CODEWITHSUNDEEP
asp.net-mvcangular
Manish Goswami
Manish Goswami

Reputation: 875

Bind Array to table in Angular

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

enter image description here

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}]

Upvotes: 2

Views: 6778

Answers (3)

Tolui Davaasuren
Tolui Davaasuren

Reputation: 31

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)
        );
    }

Upvotes: 1

Aarsh
Aarsh

Reputation: 2605

[{"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>

Upvotes: 4

End
End

Reputation: 636

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>

Upvotes: 1

Related Questions