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

Question

I'm trying to get data from sampledata.json

Errors:

{{sampledata}} displaying [object Object]
{{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.

try console.log on whole object. you will see sampledata.json has Model array( not Object) and in that array SampleDataModel and SampleDetailModel is also arrays not object. — Nitin Walia
– Nitin Walia, Commented Mar 26, 2018 at 21:23

vinayakj · Accepted Answer · 2018-03-26 21:46:54Z

3

<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

edited Mar 26, 2018 at 21:46

answered Mar 26, 2018 at 21:20

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Puneeth Over a year ago

{{sampledata |json}} worked. Thanks. Is there a better way other than adding "|json" on html? <p>{{sampleDataModel?.Title}}</p> <p>{{sampleDetailModel?.name}}</p> didn't work

vinayakj Over a year ago

display properties one by one

Puneeth Over a year ago

Now I get "ERROR TypeError: Cannot read property '0' of undefined". Also how I stringyfy in service.ts or in component?

vinayakj Over a year ago

first try with <pre>{{sampleDataModel| json}}</pre> & <pre>{{sampleDetailModel| json}}</pre>

Puneeth Over a year ago

It did only display "&". No console errors @vinayakj

|

Milos Kovacevic · Accepted Answer · 2018-03-26 21:21:50Z

1

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>

edited Mar 26, 2018 at 21:21

answered Mar 26, 2018 at 21:14

Milos Kovacevic

9011 gold badge9 silver badges21 bronze badges

3 Comments

Puneeth Over a year ago

Thank you. This worked. one last question. Is it good to use Model[0] or sampleDataModel[0] ? I might add few more data later

Milos Kovacevic Over a year ago

What i usually do is make a strongly typed model, map it with data from server and bind it to the view and allways tryin to not use [0] or anything like that directly in html. Hope it helps.

Puneeth Over a year ago

How do I do that?

Rohìt Jíndal · Accepted Answer · 2018-03-27 04:42:05Z

1

Few observations as per the code in OP :

Access SampleDataModel

To access SampleDataModel property, It should be resData.Model[0].SampleDataModel instead of resData.Model.SampleDataModel.
{{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;
```
{{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);
```

answered Mar 27, 2018 at 4:42

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

10 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related