How to set null values in angular

Question

This is related to my previous post regarding angular null values.

I am trying to understand why my application / code would behave differently in current situation.

  calculateAge(dateOne: Date, dateTwo: Date): number {
    let firstDate = new Date(dateOne);
    let secondDate = new Date(dateTwo);
    let differenceInDates = Math.abs(firstDate.getTime() - secondDate.getTime());
    let age = Math.floor(differenceInDates / (1000 * 3600 * 24));
    console.log(age);
    return age;
  }

  getFlowers() {
    this.flowerSubscription = this.flowerService.getFlowersByFlowerId(this.flowerId, this.someName).subscribe(
      res => {
        this.dataToSend = res.DataToSend
        this.flowerSubscription = this.flowerService.getFlowers(this.dataToSend, this.someName).subscribe(
          res => {
            this.flower = res; // this.Flower is interface IFlower
            console.log(this.flower); <--- this is null
            if (this.flower !== undefined) {
              this.flowerNumber = (this.flower.FNumber || '--').toString();
              this.flowerInDate = this.flower.FlowerInDate;
              this.flowerOutDate = this.flower.FlowerInDate;
              this.flowerAge = this.calculateAge(this.flower.flowerWarehouseDate, this.flower.flowerStoreDate);
              this.flowerStatus = (this.flower.FlowerStatus || '--');
              this.customerAmount = (this.flower.CustomerAmount || '--').toString();
              this.warehouseAmount = (this.flower.WarehouseAmount || '--').toString();
            }
        }
    }
}

HTML

  <table id="FlowerDetails" class="f-fs">
    <tr>
      <td class="f-title">Flower Nmber</td>
      <td class="f-text">{{flowerNumber}}</td>
    </tr>
    <tr>
      <td class="f-title">flowerInDate</td>
      <td class="f-text">{{(flowerInDate != null) ? (claimStartDate | date: 'shortDate') : '--'}}</td>
    </tr>
    <tr>
      <td class="f-title">flowerOutDate</td>
      <td class="f-text">{{(flowerOutDate != null) ? (flowerOutDate | date: 'shortDate') : '--'}}</td>
    </tr>
    <tr>
      <td class="f-title">Age</td>
      <td class="f-text">{{flowerAge}}</td>
    </tr>
    <tr>
      <td class="f-title">Flower Status</td>
      <td class="f-text">{{flowerStatus}}</td>
    </tr>
  </table>

this.flower on printing in console is null. I am setting the null values to -- if the data is null. However, console still shows a null and -- are not displayed as expected. I am using API calls to get data from backend. I dont understand why the code behaves differently when everything is same.

if (variable) is equivalent to if (variable!=undefined && variable!=null && variable!=0 && variable!="") and if (!variable) is equivalent to if (variable==undefined || variable==null || variable==0 || variable="") — Eliseo
– Eliseo, Commented Jun 26, 2018 at 16:46
Do you mean that console.log(this.flower); <--- this is null is not what you want? Should console.log(this.flower) print --? — Hyuck Kang
– Hyuck Kang, Commented Jun 26, 2018 at 16:51
If this.flower is null, then this.flower.FNumber would throw an error. Are you getting any errors? — user184994
– user184994, Commented Jun 26, 2018 at 16:57
@user184994, I get only null exception. No errors otherwise. — Maddy
– Maddy, Commented Jun 26, 2018 at 17:03

Eliseo · Accepted Answer · 2018-06-26 16:53:17Z

0

Maddy

getFlowers() {
    this.flowerSubscription = this.flowerService.getFlowersByFlowerId(this.flowerId, this.someName).subscribe(
      res => {
        this.dataToSend = res.DataToSend
        this.flowerSubscription = this.flowerService.getFlowers(this.dataToSend, this.someName).subscribe(
          res => {
            this.flower = res; // this.Flower is interface IFlower
            console.log(this.flower); <--- this is null
            if (this.flower){ //if this.flower <> undefined and <>null
              this.flowerNumber = (this.flower.FNumber || '--').toString();
              this.flowerInDate = this.flower.FlowerInDate;
              this.flowerOutDate = this.flower.FlowerInDate;
              this.flowerAge = this.calculateAge(this.flower.flowerWarehouseDate, this.flower.flowerStoreDate);
              this.flowerStatus = (this.flower.FlowerStatus || '--');
              this.customerAmount = (this.flower.CustomerAmount || '--').toString();
              this.warehouseAmount = (this.flower.WarehouseAmount || '--').toString();
            }
            else
            {
              this.flowerNumber = '--';
              this.flowerInDate = '--';
              this.flowerOutDate = '--';
              this.flowerAge = 0;
              this.flowerStatus = '--';
              this.customerAmount = '--';
              this.warehouseAmount = '--';
            }
        }
    }

answered Jun 26, 2018 at 16:53

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

3 Comments

Maddy Over a year ago

Eliseo, maybe I dont understand it fully and if you could help me explain. In my if statement, the ` || ` should validate null. Isnt that right?

Maddy Over a year ago

Also, what if only one thing is null in the if condition. I think this will fail if that is the case.

Eliseo Over a year ago

@Maddy, this.flower can be null or not. If this.flower is not null, this.flower.FlowerStatus can be null. I think that this.flowerStatus=this.flower.FlowerStatus || '--' must be ok. The other statement that say Hyuc Kang this.flowerStatus=this.flower.FlowerStatus? this.flower.FlowerStatus:'--' is ok too (is the ternary operator). But the two last statement give you an error is this.flower is null

Maddy · Accepted Answer · 2018-06-27 17:55:23Z

0

I found a solution by checking for this.dataToSend for null. If its null, I set all the values to --, otherwise I set the values with actual variables. @Eliseo, Thanks for the help.

answered Jun 27, 2018 at 17:55

Maddy

2,0905 gold badges30 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to set null values in angular

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related