时间戳

首页 > 解决方案 > 如何处理 json Observable

json - 如何处理 json Observable

问题描述

我收到一个从我的 Express 后端发送的复杂对象，使用res.json. （已注册的会员名单）。

在前端，我想将 json 响应转换为可以在模板中处理的对象。我不应该只能在 json 响应上调用 JSON.parse() 吗？

我已经看到了一些建议的解决方案，这些解决方案要求 HttpClientget调用具有要返回的对象类型的泛型，即get<MyObj>. （例如本文中的Angular Http Call）。有没有办法在不提前指定get调用的返回类型的情况下做到这一点？（我想让前端的实现尽可能的轻巧灵活，在后端做所有的数据定义，然后用前端“读取”后端的数据结构。数据结构很复杂很长，如果可以避免在后端和前端重复定义数据，将节省大量工作）。

不幸的是，我还没有找到方法，例如编辑器告诉我 JSON.parse 需要一个字符串参数，而我的 HttpClient 调用返回一个对象。

这是我到目前为止的代码：

member.service.ts: 

constructor(private http: HttpClient) { }

ngOnInit() {
  this.getList();
}

getList(): Observable<any> {
    return this.http
      .get(`${this.host_url}list`,{responseType: 'json'})
  }

register.component.ts

users$: Observable<Object>;

getUsers() {
    this.users$ = this.member.getList();
  }

register.component.html

<ul>
  <ng-container *ngFor="let user of users$ | async ">
    <li>
      {{user | json}}  <-- This gives me a string. If I use {{ user }} without the json pipe, I get an object, but can't reference its properties.
    </li>
  </ng-container>
</ul>

目前，在我的ngFor*循环中，我无法获取user对象并引用它的属性（即user.authData[0].username）。如何修改我的代码以能够引用user模板中的属性？我必须在get调用之前提供数据类型，还是有其他方法？

编辑（1）：这是{{ user | json }}管道返回的一些示例数据：

 { "_id": "5cf1b7792ecf136bd4cddebf", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5cf207038e3f2551dcf4c803", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d6ff6ac7046a519403c801f", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d7015dddba7384d64540571", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d7061fd767c8c41202f49b7", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d71b9b1fa4fb10afc346323", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d71bcd2fa4fb10afc346332", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d71bf76fa4fb10afc34633e", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d71ce7d52a93e0700f2c052", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }

标签： jsonangular

解决方案

member.service.ts：

getUsers(): Observable<any[]> {
  return this.httpClient
    .get<any[]>(`${environment.api_url}/api/users`)
    .pipe(map(data => data));}

register.component.ts：

  getUsers() {
    this.memberService.getUsers().subscribe(data => {
      this.users = data;
    });
  }

然后像你写的那样使用

<ul>
  <ng-container *ngFor="let user of users$ | async ">
    <li>
      {{user._id}}  <-- For example user name
    </li>
  </ng-container>
</ul>

推荐阅读