如何使用 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

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

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

或

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

Answer 2

您可以使用 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);

如果您希望在服务级别中提取它，以便每次调用 back-end return 仅需要所需的数据，您可以使用 RxJS [=16= 将其通过管道传输到服务调用中] 运算符。

传感器节点服务

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

现在对函数的每个请求都会return所需格式的数据

组件

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

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);

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

How to filter properties from json object with rxjs?

javascript

observable

rxjs

typescript

angular