繁体   English   中英

如何处理JSON Observable

How to process json Observable

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在使用res.json从Express后端发送一个复杂的对象。 (已注册成员的列表)。

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

我已经看到一些建议的解决方案,这些解决方案要求HttpClient get调用具有要返回的对象类型的泛型,即get<MyObj> (例如本文Angular Http Call )。 有没有一种方法,而无需事先指定get调用的返回类型? (我想使前端实现尽可能轻巧灵活,并在后端进行所有数据定义,然后使用前端“读取”后端数据结构。数据结构非常复杂且很长,如果我可以避免在后端和前端重复数据定义,它将节省很多工作。

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

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

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 }} {{ 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 } 
3 个回复

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>

您可以在数据样本的基础上获得authData数据,如下所示

<ul>
    <ng-container *ngFor="let user of users ">
        <li >
            user id {{user._id}} , authData length {{user.authData.length}}
            userName <span *ngFor="let auth of user.authData">  {{auth.userName }}</span>
        </li>
    </ng-container>
</ul>

演示⚡⚡

当然可以; 通过Angular返回解析给您的对象的方式; 您所需要做的就是拥有一些包含响应的对象变量; 通常,此对象可以是any类型,但您需要首先订阅响应。

作为模拟您的一些json来访问它的示例

getUsers() {
    this.member.getList().subscribe( resp => {
         this.users = resp;

         // To go through your json, you can use direct access like the following
         this.users.foreach(user => {
            let id = user['id'];                   // get the id
            let authData: [] = user['authData'];   // get authData list
         });

    })
}

依此类推,这将允许您动态解析,而不是在前端再次创建模型。 并且您必须知道要从HTML访问该对象,因此需要绑定每个对象,并用它们替换我的代码对象(id和authData)。 订阅和分配结果后,您在html中此部分的代码应该可以正常工作,您也可以执行嵌套循环而不会出现问题。

1 无法处理Observable.forkJoin()返回的json文件

我正在使用Angular2和一个nodejs rest api。 我必须对同一任务执行一个或多个http请求,因此我正在使用Observable.forkJoin()等待所有任务完成。 我用json解析方法映射结果,然后订阅该结果,但是我无法像以前那样从结果中获取任何json属性。 我 ...

4 处理子组件的Observable

我创建了一个我想要拆分为3个子组件的组件。 现在,我的组件从服务订阅了4个不同的observable。 一旦细分,每个子组件仍将需要来自相同4个可观察数据的数据。 应如何处理? 为每个子组件进行相同的4个订阅会导致更多REST调用,并增加了大量冗余。 可以/应该将订阅保留在父组件中 ...

2019-04-04 22:53:16 1 17   angular
5 Observable 的异步处理

总的来说,我对 rxjs 和反应式编程还很陌生,并且我对 observable 的异步处理有相当多的灰色区域。 我有一个直接的场景,在用户点击登录后将用户路由到我的网络应用程序。 流程如下: 步骤1:用户点击登录。 第 2 步:在登录按钮的处理函数 - onSuccess 中,我为当前用户更新了 ...

6 Observable中的处理错误

问题描述 我有一个带有简单功能buildUseCaseObservable的简单类。 功能应该做以下 尝试先从Internet获取数据 如果成功,则将数据写入数据库 如果失败,并且出现诸如: ServerUnavailable类的异常,则Socke ...

7 处理多个 Observable 和函数

从列表中选择特定集合时,我必须使用 http 调用获取标头。 有时 observable 响应迅速,数据按预期填充,但很多时候 observable 需要时间。 如果我们等待 observable 响应,它会按预期工作,但是当集合的选择快速切换时,因为第一个 observable 尚未响应并且新的 ...

8 如何处理嵌套的 Observable 字段?

我的 Swift 代码中有以下视图模型对象: 在 UI 层面,我愿意订阅资产变量并为每个资产执行一些自定义逻辑。 这就是我卡住的地方,因为资产对象具有Observable字段,我不确定如何处理这些嵌套字段。 这是我在做什么: 我将执行的自定义逻辑同时需要order 、 title和thumb ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM