How to handle null values in Angular

Question

I am sending data to Angular but one of the value (closed date) for a record is null. How can I handle this in Angular so that if value is null , it changed to --

  getDetails() {
    this.myService.getFlowerDetails(this.flowerId, this.flowerName).subscribe(
      res => {
        this.flower = res;
        if(this.flower !== undefined){
          this.flowerName = this.flower.flowerName;
          this.flowerId = this.flower.flowerId.toString();
          this.flowerCategory = this.flower.flowerCategory;
          this.recordCreateDate = this.flower.recordCreateDate.toString();
          this.recordClosedDate = this.flower.recordClosedDate.toString(); // this is null in the backend
        }
        else{
          this.flowerName = "--";
          this.flowerId = "--";
          this.flowerCategory = "--";
          this.recordCreateDate = "--";
          this.recordClosedDate = "--";
        }
      }, er => {
    this.throwError = er;
});

I get the following error. This is not the entire stack trace (not sure if its needed)

TypeError

columnNumber: 17

fileName: "http://localhost:4200/main.bundle.js"

lineNumber: 1738

message: "_this.flower.recordClosedDate is null"

Martin Parenteau · Accepted Answer · 2018-03-29 18:37:04Z

6

The || operator can be used to set a default value, in cases where this.flower.recordClosedDate is falsy (undefined, null, empty string, zero):

this.recordClosedDate = (this.flower.recordClosedDate || "--").toString();

answered Mar 29, 2018 at 18:37

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Comments

fcbgp · Accepted Answer · 2018-03-29 18:50:45Z

1

How about plain old ?: ternary operator :

this.recordClosedDate = this.flower.recordClosedDate !=null ?  this.flower.recordClosedDate : "--"

answered Mar 29, 2018 at 18:50

fcbgp

1,60816 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to handle null values in Angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related