Angular ngOnInit javascript errrors when i load page, but the page works as intended

I have a page in angular and in ngOnInit function i load my data. The data loads correctly and it is shown on page, everything seems to work, the only problem is in console i get a lot of javascript errors cannot read property ‘propertyName’. Any help of how i can get rid of those errors would be appresiated.

here is how i initialize the arrays where i store my data:

raceResult: RaceResultDto = new RaceResultDto();
raceResultStatistics: RaceResultStatisticsData[] = [];
raceResultParticipants: RaceResultParticipantsDto[] = [];
topFiveData: RaceResultTopFiveData[] = [];
raceResultDatas: RaceResultDataDto[] = [];

and here is how i set the data and my ngOnInit function:

ngOnInit(): void {
    this._activatedRoute.params.subscribe((params: Params) => {
        this.raceResultsId = params['id'];
        this.getRaceResult();
        // this.getRaceResultData();

    });
}

getRaceResult() {
    this.showMainSpinner();
    this._raceResultsServiceProxy.getRaceResultDto(this.raceResultsId).subscribe(result => {
        this.dataLoaded = true;

        this.raceResult = result;

        this.raceResultStatistics = result.raceResultStatistics;
        this.raceResultParticipants = result.raceResultParticipants;
        this.topFiveData = result.topFiveData;
        this.raceResultDatas = result.raceResultDatas;

        console.log(result)
        this.hideMainSpinner();
    });
}

Here is the error i get. I get a lot of those same errors:

ERROR TypeError: Cannot read property 'numberOfPigeons' of undefined
at ViewRaceResultsComponent_Template (view-raceResult.component.html:173)
at executeTemplate (core.js:7303)
at refreshView (core.js:7172)
at refreshComponent (core.js:8326)
at refreshChildComponents (core.js:6965)
at refreshView (core.js:7222)
at refreshEmbeddedViews (core.js:8280)
at refreshView (core.js:7196)
at refreshComponent (core.js:8326)
at refreshChildComponents (core.js:6965)

Here is also an example of my table where i use the data:

<table class="table">
                    <thead>
                        <tr>
                            <td>{{l("FancierFullName")}}</td>
                            <td class="text-right">{{l("NumberOfPigeons")}}</td>
                            <td class="text-right">{{l("AverageSpeed")}} [m/min]</td>
                        </tr>
                    </thead>
                    <tr *ngFor="let topFiveStat of topFiveData">
                        <td>{{topFiveStat.fancierFullName}}</td>
                        <td class="text-right">{{topFiveStat.numberOfPigeons}}</td>
                        <td class="text-right">{{topFiveStat.averageSpeedStr}}</td>
                </table>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

• There should not be an issue of null pointer inside the block of *ngFor if there is no any item with null or undefined inside topFiveData list. Verify for this inside the topFiveData list.
• If it is proper then I can see you are calling one method in template to get number of pigeons in {{l(“NumberOfPigeons”)}}. This might be executing before loading data and hence there might be some code which is causing null pointer exception.

Issue can be resolved in following ways:

1. using *ngIf in block where null pointer can happen.
2. using safe navigation operator(?) operation where null pointer can happen. e.g. topFiveStat?.numberOfPigeons . But this would only work inside template. https://angular.io/guide/template-expression-operators
3. You can add null check in .ts file.

Hope this would help you. If it won’t then please share more details of your template and component.

Method 2

This is a common error when you subscribe to any object in ngOnInit().
The reason you receive undefined is that subscribe is async function and the HTML component gets loaded before you receive the result.

One of the solutions would be to add ngIf to the HTML component based on the required object is undefined or not.

Also, it would be helpful if you share your HTML snippet.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0