Question

如何访问嵌套的json？我有以下文件：

{
    "user1": {
        "name": "john",
        "surname": "johnsson"
    },
    "user2": {
        "name": "Jacob",
        "surname": "Jacobsson"
    }
}

等等。我需要从这个带有字段名称和姓氏的JSON数据创建一个表。我怎样才能做到这一点？我写了以下代码： users.service.ts

export class UsersService {
    private _url: string = '../assets/users.json';

    constructor(private _http: Http) {
    }

    getUsers() {
        return this._http.get(this._url).map((response: Response) =>
            response.json());
    }
}

和users.component

export class UsersComponent implements OnInit {
    users = [];

    constructor(private _usersService: UsersService) {
    }

    ngOnInit() {
        this._usersService.getUsers().subscribe(resUsersData => this.users = resUsersData);
        console.log(this.users);
    }
}

然后我只想在users.component.html中使用{{users}}查看我的结果，但我只看到[object Object]。所以我显然无法访问任何其他内容并得到错误。

Answer 1

您要做的第一件事是展平您的JSON数据文件：

[{
    "name": "John",
    "surname": "Johnsson"
}, {
    "name": "Jacob",
    "surname": "Jacobsson"
}]

您已将文件命名为users.json，因此您已经描述过它将包含一组用户对象，这意味着无需再次在文件中携带该级别的层次结构（ user1，user2），实际上这让他们更难搞定。您的users文件应该是一个单层对象数组，每个对象都有name和surname属性。

另请注意，整个JSON块都包装为数组[{}]。

其次，您的服务：

export class UsersService {
    private _url: string = '../assets/users.json';

    constructor(private _http: Http) {
    }

    getUsers(): Observable<Response> {
        return this._http.get(this._url)
               .map(response => response.json())
    }
}

我确保输入所有内容，因为在阅读代码时会更清楚地显示所需的类型，并且IDE可以为您捕获类型不匹配，这使调试更容易。

然后是组件：

export class UsersComponent implements OnInit {
users: any;

constructor(private _usersService: UsersService) {
}

    ngOnInit() {
        this._usersService.getUsers()
            .subscribe(response => {
                this.users = response;
                console.log('Returned Users:', this.users);
        });
    }

如果您在订阅之外console.log这个用户，那么控制台语句将在服务解析数据之前执行，并且您将得到“未定义”，即使数据已经返回，在您将其记录后，它已被分配给您的变量。始终，通过订阅，在.subscribe块中注销您的数据。

现在您应该拥有的this.users包含一个包含2个用户对象的数组，每个用户对象都有一个名称和姓氏属性，您可以使用*ngFor

  <ul>
    <li *ngFor="let user of users">{{user.name}}, {{user.surname}}</li>
  </ul>

Answer 2

您的回复是一个对象，不一个数组。您需要将响应转换为数组，然后在html表中使用*ngFor。

您可以使用Object.keys来遍历密钥。使用.map()返回数组。

ngOnInit() {
    this._usersService.getUsers().subscribe(
        resUsersData =>
            //resUsersData is an Object, not an array. Transform it.
            this.users = Object.keys(resUsersData).map(key => resUsersData[key])
    );
    console.log(this.users);
}

现在，您可以在表格{{users}}中使用*ngFor。

Answer 3

your data format should be

   {
    "user": [{
        "name": "john",
        "surname": "johnsson"
    },{
        "name":"aish",
         "surname":"johnshon"
      }]
}

然后您可以使用foreach访问所有结果

Answer 4

{
    "users": [{
        "name": "john",
        "surname": "johnsson"
    },{
          "name": "Jacob",
        "surname": "Jacobsson"
      }],
}

然后你可以访问

angular 4抓取嵌套的json

4 个答案: