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, Jun 26 '18 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, Jun 26 '18 at 16:51
If `this.flower` is null, then `this.flower.FNumber` would throw an error. Are you getting any errors? — user184994, Jun 26 '18 at 16:57
@user184994, I get only null exception. No errors otherwise. — Maddy, Jun 26 '18 at 17:03
@HyuckKang, getting null is fine but I thought `||` should handle the null values. — Maddy, Jun 26 '18 at 17:04
@Maddy what do you mean you get `null exception`? What is the message that is printed to the console? — user184994, Jun 26 '18 at 17:05
@user184994, I am checking for null in backend as well so on the console it shows me the message that I have set in the backend. I does not show me any errors. My question in more towards why It wont print the `--`. — Maddy, Jun 26 '18 at 17:06
Where is the `console.log` that you're expecting to print the `--`? The only console.log is before you've set anything, and nothing seems to be logging the properties that are set (such as `this.flowerNumber`) — user184994, Jun 26 '18 at 17:10
@user184994 I am not printing any other console.log. If its null, it should just set the values to `--` on the front end. (HTML) — Maddy, Jun 26 '18 at 17:11
@Maddy Can you please add the HTML then that should be displaying `--`? Also, if `this.flower` truly is null, you would be getting errors in your console, as seen in the jsfiddle https://jsfiddle.net/6ekdxnL9/ — user184994, Jun 26 '18 at 17:12
There must be errors in your console if `this.flower` is null, because `this.flower.FNumber` is therefore trying to read a property of null... — user184994, Jun 26 '18 at 17:18
@user184994, As I mentioned above. There are no errors other than what I am raising in the back end. I display a custom message if i am getting a null from backend. — Maddy, Jun 26 '18 at 17:27
Can you please create a stackBlitz that reproduces the issue? You can just mock out the backend, but it allows us to reproduce the issue — user184994, Jun 26 '18 at 17:28
@Maddy Is `getFlowers` definitely being called? That may explain why you're not seeing any errors logged — user184994, Jun 26 '18 at 17:51
@user184994, Yes its been called. I am trying to make a stackBlitz — Maddy, Jun 26 '18 at 17:54

score 0 · Accepted Answer · answered Jun 26 '18 at 16:53

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 = '--';
            }
        }
    }

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, Jun 26 '18 at 17:05
Also, what if only one thing is null in the if condition. I think this will fail if that is the case. — Maddy, Jun 26 '18 at 17:08
@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 — Eliseo, Jun 26 '18 at 18:50

score 0 · Answer 2 · answered Jun 27 '18 at 17:55

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 '18 at 17:55

Maddy

2,025
5
26
59

How to set null values in angular

2 Answers2