如何从 typescript 的嵌套循环中检索数据？

Question

我已经检查了堆栈溢出的所有查询，但我无法理解。

 getLocations() {
    return this.db.collection('MotelLocations').snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return { data };
      }))
    );
  }

ds.getLocations().subscribe(a=> {
      this.locationData = JSON.stringify(a);
      console.log(this.locationData)

[{"data":{"location":"New Jersey"}},{"data":{"location":"New York"}}]

我需要位置名称。 就这样。

Answer 1

该代码使用RxJS map 运算符结合JavaScript Array#map 方法将发出的actions数组转换为数据对象数组。

如果您分别查看每个转换 function 可能会更容易理解，因为我们正在进行嵌套映射。

RxJS map采用投影 function 并将其应用于 Observable 发出的每个值：

return this.db.collection('MotelLocations').snapshotChanges().pipe(
  map(projectionFn) // <--- pass it a projection function
);

在这种情况下，发出的值是一个actions数组，所以一个简单的（但无用的）投影 function 接受发出的值并简单地返回它不变看起来像这样：

function projectionFn(actions) {
  return actions;
}

重要的是要记住，投影 function 应用于数组本身，而不是数组的每个元素，因为数组是 Observable 发出的。

下一步是转换数组的每个元素。 为此，代码只是使用 JavaScript 的 Array#map 方法。 所以你的投影 function 变成：

function projectionFn(actions) {
  return actions.map(a => { // <--- plain old JavaScript Array#map
    const data = a.payload.doc.data();
    const id = a.payload.doc.id;
    return { data }; // <--- shorthand for return { data: data };
  });
}

所以这里的 Array#map 将动作数组转换为数据对象数组。 该数据对象数组就是投影 function 返回的内容，并将其传递给 Observable pipe。

查看映射 function，其return语句使用ES2015 简写属性名称。 这允许您替换它：

const data = a.payload.doc.data();

return {
  data: data
};

有了这个：

const data = a.payload.doc.data();

return {
  data
};

当属性名称与您要引用的变量名称相同时。

现在大结局...

查看您记录的 JSON ，很明显，您从每个操作中提取的data object 的结构如下：

const data = a.payload.doc.data();

// data = { location: 'New Jersey' }

因此，如果您想要一个位置数组而不是数据对象数组，只需让您的映射 function 返回位置属性而不是整个data object。

所以改变这个：

return { data };

对此：

return data.location;

Answer 2

 getLocations() {
    return this.db.collection('MotelsInfo').snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return {... a.payload.doc.data() as {} };
      }))
    );
  }

在返回语句中，我丢失了... a.payload.doc.data() as {}然后获取了数据。位置给了我我正在寻找的东西。 我很抱歉迟到了。 但这帮助了我。