Angular 5 - Error getting data from local JSON file [object Object]

Question

I'm trying to get data from sampledata.json

Errors:

1. {{sampledata}} displaying [object Object]
2. {{sampleDataModel.Title}} ERROR TypeError: Cannot read property 'Title' of undefined

sampledata.json:

  {
    "isSuccessfull": true,
    "Model": [
        {
            "SampleDataModel": [ 
                {
                  "Title": "SampleData 1",
                  "Description": "Description."
                }
            ],

            "SampleDetailModel": [
            {
                "name": "Donald Trump",
                "id": "111",
                "country": "USA"
            }
           ]
        }
      ]
    }

sampledata.services.ts :

    import { Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import {Observable} from 'rxjs/Rx';
    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>
<p>{{sampleDetailModel.name}}</p>

My Questions is:

How do I get these values to display?

If anyone of you have any idea on how to solve this issue, please help to suggest the solutions to me, thank you.

Answer 1

<h3>{{sampledata | json}}</h3> // pipe | json needed to show object as stringyfied
<p>{{sampleDataModel[0]?.Title}}</p> // ? to check if object is not null or undefined
<p>{{sampleDetailModel[0]?.name}}</p>

And change like below

this.sampledata = resData;
this.sampleDataModel = resData.Model[0].SampleDataModel;
this.sampleDetailModel = resData.Model[0].SampleDetailModel

Answer 2

maybe you should try this: in ngOnInit when getting back your data:

this._sampledataservice.getData()
    .subscribe(resData => { 
    this.sampledata = resData;
    this.sampleDataModel = resData.Model[0].SampleDataModel;
    this.sampleDetailModel = resData.Model[0].SampleDetailModel });

... and in HTML:

<h3>{{sampledata}}</h3>
<p>{{sampleDataModel[0].Title}}</p>
<p>{{sampleDetailModel[0].name}}</p>

Answer 3

Few observations as per the code in OP :

1. Access SampleDataModel

   To access SampleDataModel property, It should be resData.Model[0].SampleDataModel instead of resData.Model.SampleDataModel .

2. {{sampleDataModel.Title}} ERROR TypeError: Cannot read property 'Title' of undefined

   To access Title property of a SampleDataModel array. It should be {{sampleDataModel[0].Title}} instead of {{sampleDataModel.Title}} .

    this.sampleDataModel = resData.Model[0].SampleDataModel; 

3. {{sampledata}} displaying [object Object]

   As sampledata is a JSON object it is displaying as [object object] . Stringify it before use in the template.

    this.sampledata = JSON.stringify(resData);