angular - Observable 查找嵌套属性

Question

Observable 返回这个对象

[
  {
    "args": { },
    "output": [
      {
        "id": "1",
        "name": "Jack",
        "lastName": "Sparrow",
      },
      {
        "id": "2",
        "name": "Davy ",
        "lastName": "Jones",
      }
    ],
  }
]

有没有办法使用RxJx 运算符返回output 数组中id===2 的元素？所以只得到这个:

{
  "id": "2",
  "name": "Davy ",
  "lastName": "Jones",
}

我想我应该使用 find，尽管找不到嵌套对象的用法示例。

我当前的代码(我知道 find 部分不正确):

  public getUserData(id: number) {
    this.http.get<any>(URL)
      .pipe(
         find(element => element.output)
      )
      .subscribe(res => {
       console.log(res)
     })
  }

Answer 1

只需结合使用 mergeMap(在其他 Rx 实现中通常称为 flatMap)和 filter!

mergeMap 允许您:

1. 将您的每个项目映射到列表(即，为每个事件发出一个值列表)
2. 扁平化列表一起回到一个事件流

...然后你过滤为了只保留匹配你选择的谓词的那些(在你的情况下:output => output.id === 2)。

---

您可以尝试使用下面的代码片段，您可以在其中自行编辑收到的响应并单击相应的按钮来触发事件。

const data = [{
  "args": {},
  "output": [{
      "id": "1",
      "name": "Jack",
      "lastName": "Sparrow",
    },
    {
      "id": "2",
      "name": "Davy ",
      "lastName": "Jones",
    }
  ],
}];

const textarea = document.querySelector('#data-source');
const button = document.querySelector('#trigger-response');

// Assume `myObservable comes from the result of an Ajax request`
const myObservable = rxjs
  .fromEvent(button, 'click')
  .pipe(rxjs.operators.map(() => JSON.parse(textarea.value.replace(/,(?=\s*\})/mg, ''))));

myObservable.pipe(
  rxjs.operators.mergeMap(response => response[0].output),
  rxjs.operators.filter(output => output.id === '2')
).subscribe(x => console.log(x));

body {
  display: flex;
  align-items: center;
}

textarea {
  flex-grow: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.0/rxjs.umd.min.js"></script>
<textarea id="data-source" rows="20">[
  {
    "args": { },
    "output": [
      {
        "id": "1",
        "name": "Jack",
        "lastName": "Sparrow",
      },
      {
        "id": "2",
        "name": "Davy ",
        "lastName": "Jones",
      }
    ],
  }
]</textarea>
<button id="trigger-response">Click Me</button>