Question

尝试从嵌套的json中获取数据。

Error: 1. <h3>{{sampledata}}</h3> displaying [object Object]
       2. <p>{{sampleDataModel.Title}}</p> ERROR TypeError: Cannot read property 'Title' of undefined

文件夹结构：

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],

角cli.json：

"assets": [
    "assets",
    "assets/data/sampledata.json",
    "favicon.ico"
  ],

我的问题是：

如何让这些值显示在sampledata.component.html，

sampledata和sampleDataModel.Title？

如果您有任何想法如何解决此问题，请帮助向我推荐解决方案，谢谢。

Answer 1

似乎问题出在private _url = 'assets/sampledatajson'

您可能需要在此.之前加一个点json

private _url = 'assets/sampledata.json'

Answer 2

在您的sampledata.component.html中，您绑定了错误的变量...绑定sampledata而不是sampledataModel。因为在订阅中，您要将值分配给this.sampledata。

Answer 3

您需要仔细查看您的JSON并查看您的属性的确切位置...您可以访问所需的数据：

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

然后在没有迭代或其他任何内容的情况下显示sampleData，请使用json管道：

<pre>{{sampledata | json}}</pre>
<p>{{sampleDataModel?.Title}}</p>

此外，您所有的变量都是您声明它们的对象而不是数组，所以......

sampledata = {};
sampleDataModel = {};
sampleDetailModel = {};

<强> StackBlitz

Angular 5如何从嵌套的Json文件中获取数据

3 个答案: