CODEWITHSUNDEEP
javascriptjsonangular
Hamza
Hamza

Reputation: 29

can't access a returned object properties from a service by angular 2 data binding

Process

I am using a service to get data (objects) from a json file with an observable and display them in the HTML template.

Problem

I can't access the objects properties by using {{obj.prop}}, it throws an error "Cannot read property 'prop' of undefined".
However if I try to access it in the component, it works.

Code

ContentService

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';

@Injectable()
export class ComponentContentService {
  constructor(private _http: Http) { }

  getContent() {
   return this._http
     .get('./app/services/dataContent.json')
     .map((response:Response) => response.json())
     .do(response => console.log('response = ', response))
  }
}

TopContentComponent

import { Component } from '@angular/core';
import { WowComponent } from '../libraries.components/wow.component/wow.component';
import { BackstretchComponent } from '../libraries.components/backstretch.component/jquery.backstretch.component';
import { ComponentContentService } from '../services/component.content.service';
@Component({
  selector: 'top-content',
  templateUrl: './app/top-content.component/top-content.component.html',
  directives: [WowComponent, BackstretchComponent]
})
export class TopContentComponent {
  header  : any;
  description : any;
  data : any;
  constructor(private _ComponentContentService: ComponentContentService) {}

  ngOnInit() {this.getComponentContent();}

  getComponentContent() {
    this._ComponentContentService.getContent()
      .subscribe(
        (data) => {
          this.data = data;
        }
      );
  }
}

Template

<p>{{data.header.title}}<p>

JSON

{
  "header" : {
    "title":"Our New Course is Ready",
    "description" : "We have been working very hard"
  },
  "Footer" : {
    "title":"Our New Course is Ready",
    "description" : "We have been working very hard to create the new version of our course. It comes with a lot of new features, easy to follow videos and images. Check it out now!"
  },
}

Upvotes: 1

Views: 2006

Answers (1)

Oleg Barinov
Oleg Barinov

Reputation: 1665

You should change {{data.header.title}} for {{data?.header?.title}}

Upvotes: 5

Related Questions