Bind Array to table in Angular

angular 4 dynamic table from json
angular 2 add table row dynamically
angular reusable table component
angular table row component
how to get row data from table using angular 4
angular 6 dynamic table columns
angular dynamic table
angular 7 table example

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

Binding Array to a Table - Nishu Goel, The service returns an array of objects which represent the characters we want to display in our table. Each character has the following  You can easily bind a JSON array or data to an HTML table in AngularJS. The example that I am going to share with you here is an extension of my previous article on how to sort date extracted from a JSON array and show the data in descending order using AngularJS ng-repeat orderBy filter. Using a very similar method, now I’ll show you how to bind JSON data to an HTML table in AngularJS using ng-repeat directive.

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>

Display a Table using Components with Angular 4, Here, in this post I'll show you how to easily bind JSON data to an HTML table in AngularJS using ng-repeat directive. The “of” keyword is used to iterate through each element or object from headers array that is declared in .ts file. So for displaying that header column, we have to use data binding in Angular that is using double curly braces(“{{column}}”). Also Check ==> Display Table in Angular using JSON Server Rest API

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

How to Bind JSON Array or Data to an HTML Table in AngularJS , This template will generate the HTML table that we showed just above. We can see Can't bind to 'ngFor' since it isn't a known property of 'tr'. Angular FormArray Example. Angular FormArray is a bit like FormGroup, and it’s used in a very similar way, the difference being that it’s used as an array that envelops around an arbitrary amount of FormControl, FormGroup or even other FormArray instances. FormArray is a class of @angular/forms module.

Binding Arrays to Tables in Angular, The easiest way to display a component property is to bind the property name through To convert this binding to use specialized objects, turn the array of hero  The table component will have the main table element and table headers. The table row component will contain row data and will be generated for each character in the character array. Display the Components

Angular ngFor, Here Mudassar Ahmed Khan has explained with an example, how to bind JSON data (array) to HTML table using AngularJS. The AngularJS  Many of the existing DOM elements will be reused and only some values inside them will be overwritten, and the decision is taken for each element in the list separately. In order to take that decision Angular needs to identify each list element in a unique way,

Displaying data in views, How to print an array in table format using angularJS? In JavaScript, data can be stored in the form of arrays. Each of the array items has unique indexing, starting​  how to get same table value after changes in item.hour model and save that table using json array – Saikh Rakif Jan 29 at 9:16

Comments
  • you are creating a 2D array . remove the this.scanList = Array.of(this.scanList); as your data is already an array of objects
  • Previously i had removed, but not able to bind data and then i tried by Array.of(this.scanList) but nothing change
  • you have an array of array you ngFor works on array of objects, change that
  • Yes Rahul i had removed, but still same result.Nothing change
  • You are using ContainerID instead of containerID