Angular JSON Object inside Object http request

Question

I'm trying to Access Json object i'm getting the data. but it showing error. How can i get the data without any error

ERROR TypeError: Cannot read property 'DATA' of undefined
    at Object.View_DosminusComponent_0._co [as updateDirectives] (DosminusComponent.html:3)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075)
    at checkAndUpdateView (core.es5.js:12255)
    at callViewAction (core.es5.js:12620)
    at execComponentViewsAction (core.es5.js:12552)
    at checkAndUpdateView (core.es5.js:12261)
    at callViewAction (core.es5.js:12620)
    at execComponentViewsAction (core.es5.js:12552)
    at checkAndUpdateView (core.es5.js:12261)
    at callWithDebugContext (core.es5.js:13475)


// Component

import { DosminusService } from './../services/dosminus.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dosminus',
  templateUrl: './dosminus.component.html',
  styleUrls: ['./dosminus.component.css']
})
export class DosminusComponent implements OnInit {

  dosMinusData: any;
  constructor(private dosminusService: DosminusService) { 

  }

  ngOnInit() {
    this.dosminusService.getDosMinusRecords()
    .subscribe(response => {
      this.dosMinusData = response.json();
    })
  }

}





//Service 
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class DosminusService {

  constructor(private http: Http) {

   }

   getDosMinusRecords(){
     return this.http.get('assets/Jsondata/dosminus.json');
   }

}

//JSON

{
    "DATA":{
        "kpiValue":"10",
        "kpiColor":"#A21313"
    }
}

<div class="e2e-dosminus">
  <div class="dosminus-center">
    <div class="dosminus-number-circle" [ngStyle]="{'backgroundColor': dosMinusData.DATA.kpiColor}">
    {{ dosMinusData.DATA.kpiValue }}
   </div>
  </div>
  <h4> Dos(-) </h4>
</div>

Answer 1

I consider the Observable + async pipe approach to be cleaner than the elvis operator (?) if you ask me:

export class DosminusComponent implements OnInit {

  dosMinusData$: Observable<any>;
  constructor(private dosminusService: DosminusService) { 

  }

  ngOnInit() {
    this.dosMinusData$ = this.dosminusService.getDosMinusRecords();
  }
}

<ng-container *ngIf="dosMinusData$ | async as dosMinusData">
  <div class="dosminus-number-circle" [ngStyle]="{'backgroundColor': 
    dosMinusData.DATA.kpiColor}">
    {{ dosMinusData.DATA.kpiValue }}
  </div>
</ng-container>

@Injectable()
export class DosminusService {

  constructor(private http: Http) {

   }

   getDosMinusRecords(){
     return this.http.get('assets/Jsondata/dosminus.json').map(r => r.json());
   }

}

Answer 2

Use safe navigation operator ? to avoid the error if the data is not present

<div class="dosminus-number-circle" [ngStyle]="{'backgroundColor': dosMinusData.DATA.kpiColor}">
    {{ dosMinusData?.DATA?.kpiValue }}
</div>