Encountering difficulties retrieving data from nested JSON.
Error:
1. <h3>{{sampledata}}</h3> displaying [object Object]
2. <p>{{sampleDataModel.Title}}</p> ERROR TypeError: Cannot read property 'Title' of undefined
Directory Structure:
sampledata.json:
{
"isSuccessfull": true,
"Model": [
{
"SampleDataModel": [
{
"Title": "SampleData 1",
"Description": "Some Text"
}
],
"SampleDetailModel": [
{
"Name": "Donald Trump",
"Id": "111",
"Country": "USA"
}
]
}
]
}
sampledata.services.ts :
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class SampledataService {
private _url = 'assets/data/sampledata.json'
constructor(private _http: Http) { }
getData(){
return this._http.get(this._url)
.map((resSampleData: Response) => resSampleData.json());
}
}
sampledata.component.ts:
import { Component, OnInit } from '@angular/core';
import { SampledataService } from '../sampledata.service'
@Component({
selector: 'app-sampledata',
templateUrl: './sampledata.component.html',
styleUrls: ['./sampledata.component.css']
})
export class SampledataComponent implements OnInit {
sampledata = [];
sampleDataModel = [];
sampleDetailModel = [];
constructor(private _sampledataservice: SampledataService) { }
ngOnInit() {
this._sampledataservice.getData()
.subscribe(resData => {
this.sampledata = resData;
this.sampleDataModel = resData.Model.SampleDataModel;
this.sampleDetailModel = resData.Model.SampleDetailModel });
}
}
sampledata.component.html:
<h3>{{sampledata}}</h3>
<p>{{sampleDataModel.Title}}</p>
app.module.ts:
declarations: [
AppComponent,
SampledataComponent
],
imports: [
BrowserModule, HttpClientModule, HttpModule
],
providers: [HttpClientModule, SampledataService],
angular-cli.json:
"assets": [
"assets",
"assets/data/sampledata.json",
"favicon.ico"
],
Seeking Assistance On:
- How can I display these values on sampledata.component.html,
sampledata and sampleDataModel.Title?
If anyone has suggestions or solutions to resolve this issue, please feel free to share. Thank you.