如何使用 rxjs 从 json 对象中过滤属性？

Question

我有这个 json 对象：

data: (85) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
labelPositions: (85) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
nodes: Array(26)
0: {id: 0, name: "CS-A", latitude: 51.84201494369347, longitude: 4.46476401684265}
1: {id: 1, name: "ZUID-E", latitude: 51.85043431186642, longitude: 4.4731833850155995}
2: {id: 2, name: "UNDEFINED", latitude: 51.852192429885925, longitude: 4.474941503035103}
3: {id: 3, name: "CS-L", latitude: 51.84773604637089, longitude: 4.470485119520069}
4: {id: 4, name: "CS-B", latitude: 51.85116783184093, longitude: 4.47391690499011}

使用此功能：

  showSensors() {
    this.sensorNodeService.sensorMetadata().subscribe((data) => {
      console.log('sensorMetadata', data.nodes);
    });
  }

但现在我只想从纬度和经度获取值。 这样你就会得到一个这样的列表：

[51.84201494369347, 4.46476401684265 ], [51.85043431186642,4.4731833850155995 ]

等等。

但是如何做到这一点呢？

谢谢

我现在有这样的：

  showSensors() {
    this.sensorNodeService
        .sensorMetadata()
        .pipe(map((data) => data.nodes.map((node) => [node.gpsLat, node.gpsLng])))
        .subscribe((data2) => {
          console.log(data2);
        });
  }

但我仍然得到

[undefined, undefined]
22: (2) [undefined, undefined]
23: (2) [undefined, undefined]

因为api调用是swagger生成的

这是模型：

export interface Node {
    readonly id?: number;
    readonly name?: string | null;
    readonly gpsLat?: number;
    readonly gpsLng?: number;
}

所以我像这样尝试：

    this.sensorNodeService.sensorMetadata().subscribe(data => {
      const latlong = data.nodes.map(node => ({latitude: node.gpsLat, longitude: node.gpsLng}));

      console.log(latlong);
      console.log(latlong[0].latitude);
    });

但仍然未定义

Answer 1

您可以使用Array#map函数根据另一个数组的属性创建一个数组。 尝试以下

 var data = { nodes: [ {id: 0, name: "CS-A", latitude: 51.84201494369347, longitude: 4.46476401684265}, {id: 1, name: "ZUID-E", latitude: 51.85043431186642, longitude: 4.4731833850155995}, {id: 2, name: "UNDEFINED", latitude: 51.852192429885925, longitude: 4.474941503035103}, {id: 3, name: "CS-L", latitude: 51.84773604637089, longitude: 4.470485119520069}, {id: 4, name: "CS-B", latitude: 51.85116783184093, longitude: 4.47391690499011} ]}; const latlong = data.nodes.map(node => [node.latitude, node.longitude]); console.log(latlong);

如果您希望在服务级别提取此信息，以便对后端的每次调用仅返回所需的数据，您可以使用 RxJS map运算符将其通过管道传输到服务调用中。

传感器节点服务

public sensorMetadata(): Observable<any> {
  return this.http.get('someUrl').pipe(
    map(data => data.nodes.map(node => [node.gpsLat, node.gpsLng]))
  );
}

现在对函数的每个请求都将以所需格式返回数据

成分

showSensors() {
  this.sensorNodeService.sensorMetadata().subscribe((data) => {
    console.log('sensorMetadata', data);  // <-- will print `[[ 51.84201494369347, 4.46476401684265 ], [ 51.85043431186642, 4.4731833850155995 ],...]`
  });
}

Answer 2

只需使用标准的 ES6 函数，例如Array.prototype.map ：

data.nodes.map(n => n.latitude)

或者

data.nodes.map(n => [n.latitude, n.longitude])

Answer 3

尝试这个：

 var data = { nodes: [ {id: 0, name: "CS-A", latitude: 51.84201494369347, longitude: 4.46476401684265}, {id: 1, name: "ZUID-E", latitude: 51.85043431186642, longitude: 4.4731833850155995}, {id: 2, name: "UNDEFINED", latitude: 51.852192429885925, longitude: 4.474941503035103}, {id: 3, name: "CS-L", latitude: 51.84773604637089, longitude: 4.470485119520069}, {id: 4, name: "CS-B", latitude: 51.85116783184093, longitude: 4.47391690499011} ]}; const latlong = data.nodes.map(node => ({gpsLat: node.latitude,gpsLng:node.longitude})); console.log(latlong); console.log(latlong[0].gpsLat);