How to handle null case in Angular?

Question

This my html code and below in my ts code ,

 <div id="address" class="bg-light rounded mt-3">
                <div class="h5 font-weight-bold text-primary"> Customer Feedback </div>
                <div class="d-md-flex justify-content-md-start align-items-md-center pt-3">
                    <div class="mr-auto"> <b>Purchase Feedback </b>
                        <p class="text-justify text-muted">{{description}}</p>
                    </div>
                </div>
            </div>

I am getting this feedback from an api which I am storing in localstorge , but sometime its very much possible that this.feedbackdetails.description might be null , when the data is available it works fine but data is not available it gives error something like this

   this.feedbackdetails = JSON.parse(localStorage.getItem('feedback'))
    if (this.feedbackdetails.description != null) {
      this.description = this.feedbackdetails.description
    } else {
      this.description = 'NO FEEDBACK PROVIDED'
    }

ErrorMsg:-

TypeError: Cannot read property 'description' of null
    at GetcutomerorderdetailsComponent.push../src/app/getcutomerorderdetails/getcutomerorderdetails.component.ts.GetcutomerorderdetailsComponent.ngOnInit (main.js:1407)
    at checkAndUpdateDirectiveInline (vendor.js:56990)
    at checkAndUpdateNodeInline (vendor.js:65246

Is there any way to handle this ?

use *ngIf="{feedbackdetails}", also, why do you have thiss.description and this.descriptiondata? — AdityaParab
– AdityaParab, Commented Jul 19, 2021 at 12:28

Hoch · Accepted Answer · 2021-07-19 12:33:00Z

1

You can change your if to handle the lack of this.feedbackdetails.description:

if(this.feedbackdetails && this.feedbackdetails.hasOwnProperty("description"))

answered Jul 19, 2021 at 12:33

Hoch

5464 silver badges16 bronze badges

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

Comments

Dalibor · Accepted Answer · 2022-04-15 08:27:18Z

1

In your case this would be enough, since you detect existance of value of description property (regardless if it exists or not)

if (this.feedbackdetails && this.feedbackdetails.description)

or simplified:

if (this.feedbackdetails?.description)

edited Apr 15, 2022 at 8:27

answered Jul 19, 2021 at 12:35

Dalibor

1,5841 gold badge22 silver badges49 bronze badges

Comments

Amil Sajeev · Accepted Answer · 2021-07-19 12:40:07Z

0

You can try by giving a null check in the start

this.feedbackdetails = JSON.parse(localStorage.getItem('feedback'))
if(this.feedbackdetails){
  if (this.feedbackdetails.description != null) {
    this.description = this.feedbackdetails.description
  } else {
    this.description = 'NO FEEDBACK PROVIDED'
  }
}

or using ? operator

if (this.feedbackdetails?.description != null) {
    this.description = this.feedbackdetails.description
  } else {
    this.description = 'NO FEEDBACK PROVIDED'
  }

answered Jul 19, 2021 at 12:40

Amil Sajeev

2702 silver badges10 bronze badges

Comments

Nayak · Accepted Answer · 2021-07-19 13:04:04Z

0

I would simply do:

this.feedbackdetails = JSON.parse(localStorage.getItem('feedback'))
this.description = this.feedbackdetails?.description ?? 'NO FEEDBACK PROVIDED';

this.feedbackdetails? would do the null/undefined validation and return 'NO F..' if null,

Else would check this.feedbackdetails.description, which if null/undefined, would again return 'NO F..', or the value even if it's ''/0/false.

answered Jul 19, 2021 at 13:04

Nayak

7626 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to handle null case in Angular?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related