0

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>
Jota.Toledo
  • 27,293
  • 11
  • 59
  • 73
Arun
  • 71
  • 1
  • 11
  • 1
    See the tutorial, https://stackoverflow.com/q/39755336/3001761 and dozens of other "cannot read property [whatever] of undefined" questions. – jonrsharpe Sep 02 '17 at 15:01
  • {{ dosMinusData?.DATA.kpiValue }} – Julius Dzidzevičius Sep 02 '17 at 15:01
  • Possible duplicate of [Angular2: Cannot read property 'name' of undefined](https://stackoverflow.com/questions/39755336/angular2-cannot-read-property-name-of-undefined) – AT82 Sep 02 '17 at 18:08

2 Answers2

1

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>
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
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());
   }

}
Jota.Toledo
  • 27,293
  • 11
  • 59
  • 73