Angular web app - typescript http data issue

Question

I'm building a webapp using Angular and the SpringMVC Framework. I'm trying to load a list of users (named "consulenti" in the code). Everthing with the http request from the backend is fine But when I try to handle the data using TypeScript in the frontend part I keep getting errors like this:

Cannot set property 'headerRow' of undefined at TablesComponent.ngOnInit (webpack-internal:///./src/app/tables/tables.component.ts:27

Cannot read property 'headerRow' of undefined

Cannot read property 'push' of undefined

and so on with the other properties.

I'm trying to show the data in a table, using a free angular dashboard client as a template.

Here below is the code.

tables.component.ts

export class TablesComponent implements OnInit {
public consulenti: Consulente[];
public consulentiData: TableData;
private rows: number;
private cols: number;

constructor(private dataService: DataService) {} // Service injection

setRowData() {
    if (this.rows != undefined && this.cols != undefined) {
        for (let i = 0; i < this.cols; i++) this.consulentiData.dataRows[i] = this.consulenti[i].stringify();
    }
    // else error
}

ngOnInit() {
    this.consulentiData.headerRow = ['Id', 'Nome', 'Cognome', 'E-mail', 'Scadenza contratto'];
    this.dataService.getConsulenti().subscribe(data => {
        for (let i = 0; i < data.length; i++) this.consulenti.push(data[i]);
    });
    this.rows = this.consulenti.length;
    this.cols = this.consulenti[0].stringifyFields;
    this.consulentiData.headerRow = ['Id', 'Nome', 'Cognome', 'E-mail', 'Scadenza contratto'];
    this.setRowData();
}

tables.template.html

<div class="content table-responsive table-full-width">
    <table class="table table-hover table-striped">
        <thead>
            <tr>
                <th *ngFor="let cell of consulentiData.headerRow">{{ cell }}</th>
            </tr>
       </thead>
       <tbody>
           <tr *ngFor="let row of consulentiData.dataRows">
               <td *ngFor="let cell of row">{{cell}}</td>
           </tr>
        </tbody>
    </table>
</div>

Thank you very much in advance!

UPDATE

It now gets stuck in the subscription, when retrieving data from the http request to the array "consulenti". Watching from debugger the copy operation goes well but then the array become again empty after the subscription ends.

Code

this.dataService.getConsulenti().subscribe((data: Consulente[]) => {
        this.consulenti = data;
}); // stuck after this.

public consulentiData: TableData; -> undefined this.consulentiData.headerRow = this.undefined.headerRow -> Cannot set property 'headerRow' of undefined Like Prachi said you need to initialize your fields first. — J. S.
– J. S., Commented May 29, 2018 at 11:21

Prachi · Accepted Answer · 2018-05-29 15:52:16Z

2

Define them as below:

public consulenti: any[] = [];
public consulentiData:any = {};

Edit

For accessing subscribed data:

ngOnInit() {
    this.consulentiData.headerRow = ['Id', 'Nome', 'Cognome', 'E-mail', 'Scadenza contratto'];
    this.dataService.getConsulenti().subscribe(data => {
    this.consulenti = data;
    this.rows = this.consulenti.length;
    this.cols = this.consulenti[0].stringifyFields;
    this.consulentiData.headerRow = ['Id', 'Nome', 'Cognome', 'E-mail', 'Scadenza contratto'];
    this.setRowData();
    });
}

edited May 29, 2018 at 15:52

answered May 29, 2018 at 11:13

Prachi

3,60421 silver badges38 bronze badges

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

2 Comments

MauroV Over a year ago

Thanks you! Now I've crushed into some other error. It seems that it can get the data from the subscription. In the debugger the data is copied, but when the function ends the array "consulenti" result empty. Can you help me with that? many thanks.

MauroV Over a year ago

Unfortunately that doesn't work. Thanks for your help though. Appreciated it!

Collectives™ on Stack Overflow

Angular web app - typescript http data issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related