从Angular 2中的Hal + JSON对象解析信息 [英] Parse information from a Hal+JSON object in Angular 2

问题描述

我有一个spring-data-rest存储库，它生成一个hal + json对象，我希望我的Angular 2前端可以接收和显示.

I have a spring-data-rest repository producing a hal+json object that I'd like my Angular 2 front end to receive and display.

Hal + Json对象:

Hal+Json Object:

{
  "_embedded" : {
    "users" : [ {
      "name" : "Bob",
      "_links" : {
        "self" : {
          "href" : "http://localhost:4200/api/users/1"
        },
        "user" : {
          "href" : "http://localhost:4200/api/users/1"
        }
      }
    }, {
      "name" : "Joe",
      "_links" : {
        "self" : {
          "href" : "http://localhost:4200/api/users/2"
        },
        "user" : {
          "href" : "http://localhost:4200/api/users/2"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:4200/api/users"
    },
    "profile" : {
      "href" : "http://localhost:4200/api/profile/users"
    },
    "search" : {
      "href" : "http://localhost:4200/api/users/search"
    }
  },
  "page" : {
    "size" : 20,
    "totalElements" : 2,
    "totalPages" : 1,
    "number" : 0
  }
}

我有一个服务对此API进行获取请求.

I have a service that does a get request to this api.

user.service.ts:

user.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { User } from './user.model';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'

@Injectable()
export class UserService {

  constructor(private http: Http) {
  }

  findAllUsers(): Observable<Array<User>> {
    return this.http.get('/api/users')
      .map((response: Response) => response.json())
      .map((data: Array<User>) => {
        return data;
      });
  }
}

然后，我的users.component从服务中调用findAllUsers方法.

Then my users.component calls the findAllUsers method from the service.

users.component.ts

users.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from './user.model';
import { UserService } from './user.service';

@Component({
  selector: 'app-users',
  providers: [UserService],
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users: User[];

  constructor(private userService: UserService) {
  }

  ngOnInit(): void {
   this.userService.findAllUsers().subscribe((data: Array<User>) => {
     this.users = data;
   });
  }

}

最后，users.component.html:

Finally, users.component.html:

<h4>Users:</h4>

<div *ngFor="let user of users">
  {{user}}
</div>

在我看来，我收到一条错误消息，指出:Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.我不确定如何解决此问题.

On my view I get an error stating that: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. I'm not sure how to solve this.

如果在服务中返回data之前尝试使用调试器，则可以看到hal + json对象= data，并且可以从data._embedded_users中看到所需的正确信息.但这不能映射到User []，因为_embedded不是我的用户模型的属性.我需要先对Hal + Json对象做些什么吗?

If I try to use the debugger before data is returned in the service, then I can see my hal+json object = data, and I can see the correct information I want from data._embedded_users. But that cannot be mapped to User[] because _embedded isn't a property of my user model. Do I need to do something to the Hal+Json object first?

推荐答案

我需要先对Hal + Json对象做些什么吗?

Do I need to do something to the Hal+Json object first?

这不是很明显吗?只需提取服务中的数据

Is it not obvious? Just extract the data in the service

findAllUsers(): Observable<Array<User>> {
  return this.http.get('/api/users')
    .map((response: Response) => response.json())
    .map((data: any) => {
      return data._embedded.users as User[];
    });
}

你以前有过

.map((data: Array<User>) => {
  return data;
});

是不正确的，因为您假设传递给第二个map的数据是用户数组，而实际上它是整个HAL对象.将其更改为any可以使您从中提取用户.

is incorrect, as you made the assumption that the data being passed to the second map is the array of users, when actually it's the whole HAL object. Changing it to any allows you two extract the users from it.

这篇关于从Angular 2中的Hal + JSON对象解析信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！