Can'；t使用Angular 6打印嵌套的JSON数据

我正在学习编码，但在Angular 6中遇到了这个问题，我似乎无法解决这个问题。我以前能够获取JSON的数据，但现在它是嵌套的，我不知道如何获取它的数据。这就是我到目前为止所做的

服务

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

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class TestService {
    url = "http://localhost:80/assets/data/test.json";
    constructor(private http:Http) { }

    getTestWithObservable(): Observable<any> {
        return this.http.get(this.url)
            .map(this.extractData)
            .catch(this.handleErrorObservable);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body;
    }

    private handleErrorObservable (error: Response | any) {
        console.error(error.message || error);
        return Observable.throw(error.message || error);
    }
}

HTML

{{x.name}

---

如果有人能指出解决方案或我做错了什么，我将不胜感激。

您需要将数据保存在实例属性中才能访问它<代码>用户_数据是您的函数的本地数据，您无法在模板中访问它，因此您应该使用如下内容：

export class TestComponent implements OnInit {
    observableTest: Observable<any>
    errorMessage: String;
    user_data: any;

    constructor(private testService: TestService) { }

    ngOnInit(): void {
        this.testService.getTestWithObservable().subscribe(
            res => {
                let user = res[0]['users'];
                let user_data = user['data'];
                console.log(user_data['name']);
                this.user_data = user_data; // here
            }
        );
    }
}

导出类TestComponent实现OnInit{
可观察的
错误消息：字符串；
用户数据：任何；
构造函数（私有testService:testService）{}
ngOnInit（）：void{
this.testService.getTestWithObservable（）.subscribe(
res=>{
让user=res[0]['users']；
让user_data=user['data']；
日志（用户_数据['name']）；
this.user\u data=user\u data；//此处
}
);
}
}

您需要将数据保存在实例属性中才能访问它<代码>用户_数据是您的函数的本地数据，您无法在模板中访问它，因此您应该使用如下内容：

export class TestComponent implements OnInit {
    observableTest: Observable<any>
    errorMessage: String;
    user_data: any;

    constructor(private testService: TestService) { }

    ngOnInit(): void {
        this.testService.getTestWithObservable().subscribe(
            res => {
                let user = res[0]['users'];
                let user_data = user['data'];
                console.log(user_data['name']);
                this.user_data = user_data; // here
            }
        );
    }
}

导出类TestComponent实现OnInit{
可观察的
错误消息：字符串；
用户数据：任何；
构造函数（私有testService:testService）{}
ngOnInit（）：void{
this.testService.getTestWithObservable（）.subscribe(
res=>{
让user=res[0]['users']；
让user_data=user['data']；
日志（用户_数据['name']）；
this.user\u data=user\u data；//此处
}
);
}
}

您的代码有一些问题：

export class TestComponent implements OnInit {
  observableTest: Observable<any>
  errorMessage: String;

  user_data: any;

  constructor(private testService: TestService) {
  }

  ngOnInit(): void {
    this.testService.getTestWithObservable().subscribe(
      res => {
        let user = res[0]["users"];
        this.user_data = user["data"];
        console.log(user_data["name"]);
      }
    );
  }
}

使用HttpClient（Http已被弃用），可以为您完成.json（）。您不需要extractData函数

• 您必须初始化变量。并用“this”来指代它

---

您的代码存在一些问题：

export class TestComponent implements OnInit {
  observableTest: Observable<any>
  errorMessage: String;

  user_data: any;

  constructor(private testService: TestService) {
  }

  ngOnInit(): void {
    this.testService.getTestWithObservable().subscribe(
      res => {
        let user = res[0]["users"];
        this.user_data = user["data"];
        console.log(user_data["name"]);
      }
    );
  }
}

使用HttpClient（Http已被弃用），可以为您完成.json（）。您不需要extractData函数

• 您必须初始化变量。并用“this”来指代它

---

当console.log时您是否获得数据？

user\u data

是一个数组，因此您需要

user\u data[0][“name”]

（虽然没有理由对属性使用方括号语法，但也可以使用

user\u data[0].name

）此属性。user\u data=res[0]。users.data。解释：res是一个数组，res[0]是一个具有users属性的对象。users属性有一个属性数据，它是您在控制台获取数据时正在查找的数组。log？

user_data

是一个数组，因此您需要

user_data[0][“name”]

（虽然没有理由对属性使用方括号语法，但也可以使用

user_data[0]。name

）这样做。user_data=res[0]。users.data。解释：res是一个数组，res[0]是一个具有users属性的对象。users属性有一个属性数据，它是您正在查找的数组OP的代码没有使用

HttpClient

，因此需要

extractData

。也就是说，代码几乎肯定应该更新为使用

HttpClient

，谢谢你的提示，我已经选择了正确的答案，但是是的，这就是问题所在。很多人感谢OP的代码没有使用

HttpClient

，因此需要

extractData

。也就是说，代码几乎肯定应该更新为使用

HttpClient

，谢谢你的提示，我已经选择了正确的答案，但是是的，这就是问题所在。许多双引号应改为单引号作为“用户”->“用户”，每个双引号应改为单引号作为“用户”->“用户”

export class TestComponent implements OnInit {
  observableTest: Observable<any>
  errorMessage: String;

  user_data: any;

  constructor(private testService: TestService) {
  }

  ngOnInit(): void {
    this.testService.getTestWithObservable().subscribe(
      res => {
        let user = res[0]["users"];
        this.user_data = user["data"];
        console.log(user_data["name"]);
      }
    );
  }
}

this.http.get(this.url)
  .pipe(
    filter(...),
    map(...)
  )