Question

我下面有这个json字符串，我想根据给定请求所需的那个来提取“股票”数据数组或“联系人”数据数组：

[{
  "id": "stocks",
  "name": "Stocks",
  "data": [
    {
      "id": 1,
      "name": "Actuant Corporation",
      "symbol": "ATU"
    },
    {
      "id": 2,
      "name": "Xilinx, Inc.",
      "symbol": "XLNX"
    }
  ]
},
{
  "id": "contacts",
  "name": "Contacts",
  "data": [
    {
      "id": 1,
      "full_name": "Betty Traise"
    },
    {
      "id": 2,
      "full_name": "Hank Hurrion"
    },
    {
      "id": 3,
      "full_name": "Calvin Ommanney"
    }
  ]
}]

例如，在下面的函数中，该函数是可观察的，假定有效负载参数为“ contacts”。在这种情况下，我需要返回“ id：“ contacts”数据数组。这是我正在使用的代码：

  loadData$(payload: any = {}): Observable<any> {
  // paths: {
  //   titlemaps: 'http://localhost:4100/data'
  // },
  // return this.service.get(this.config.paths.titlemaps, payload);
  const JSON: any  = this.service.get(this.config.paths.titlemaps, payload);
  console.log('payload: ' + payload, 'json: ' + JSON); // if payload is "contacts", return only the contacts
  return JSON.find(data => data.id === 'contacts');
}

控制台日志按预期返回“联系人”和整个JSON。但是，JSON.find失败并显示错误：

错误TypeError：JSON.find不是函数

当我稍微切换函数类型时，我会遇到打字稿编译器错误：

[ts]属性“查找”在类型“可观察”上不存在。

我想念什么？

Answer 1

服务调用的结果似乎是可以观察到的，可以使用rxjs可管道运算符转换结果并返回新值：

import { map } from 'rxjs/operators';
....

loadData$(payload: any = {}): Observable<any> {
   return this.service.get(this.config.paths.titlemaps)
     .pipe(
        map(result => result.find(data => data.id === payload))
      );
}

希望有帮助！

Answer 2

我将映射/查找操作移到了服务上，因为您将那些作为参数传递了，但是您不必像这样那样做...

https://stackblitz.com/edit/angular-2lajx4

要点...

  get(url, payload) {
    return of(results)
    .pipe(map((res: any) => {
      return res.find(data => data.id === payload)
    }));
  }

只需在此处使用of（）来模拟可观察的结果，结果就是您在上面提供的JSON ...

loadData $订阅get并将数据放入变量以供使用

  data: any;

  loadData$(payload: any = {}) {
    this.service.get('../results.json', payload).subscribe(data => {
      this.data = data
      console.log('payload: ' + payload, 'json: ' + this.data); // if payload is "contacts", return only the contacts
    });
  }

Angular Typescript通过可观察的ID访问特定的JSON对象

2 个答案: