RxJS - 构造具有异步解析属性的对象答案

【问题标题】：RxJS - construct objects with properties being resolved asynchronouslyRxJS - 构造具有异步解析属性的对象
【发布时间】：2017-04-23 16:57:18
【问题描述】：

我有一个json文件，内容如下：

"brushPresets":
[
{
  "name": "fur",
  "imageUrl": "brush.png",
  "func": "spray",
  "scale": "1"
},
{
  "name": "tinsel",
  "imageUrl": "brush.png",
  "func": "fur",
  "scale": "1"
}, ....]

我需要构造一个具有以下属性的 BrushPreset 对象数组：

name:string,
image:HTMLImageElement,
func:Function,
scale:number

因此，我需要先加载一个 json 文件，然后为每个画笔异步加载一个图像并将其分配给 BrushPreset 对象的图像属性。

loadImage(url:string) 方法已经实现并返回 Observable。

我将如何实现加载这个 json 文件并返回的方法

Observable< BrushPreset[]>

【问题讨论】：

请查看指南stackoverflow.com/help/how-to-ask。正如目前所表达的那样，您的问题过于宽泛，没有显示出任何研究或尝试解决问题的迹象。您也可以查看stackoverflow.com/help/mcve
对不起。如果我的尝试都没有成功，我应该如何表明我正在尝试解决这个问题？我在看mergeMap、concatMap、forkJoin。但没能找到合适的运营商组合来解决问题。并且只会让我自己感到困惑。因此，我试图尽可能清楚地说明问题，而没有尝试无效。
如果您的一项尝试成功了，那么您就不会遇到问题。绝大多数发布问题的人都是这种情况。但是，推荐的做法是展示您所做的研究（参见指南），以及您遇到但尚未解决的问题。在许多情况下，这涉及显示您尝试过但没有工作的一些代码。其次，正如您的问题所表达的那样，它太宽泛了：加载 json 文件、加载图像等。每一个都可能是他们自己的问题（我如何加载文件？）。
我特别建议您查看有关 SO 的其他问题，因为您遇到的任何问题都可能已被其他人遇到过，并且您经常可以从中得出与 SO 答案相关的问题至少是部分解决方案。
这不是我问的第一个问题。而且我确实了解系统在这里的工作原理。 -> 其中每一个都可能是他们自己的问题（我如何加载文件？）。最后强调了我感兴趣的问题。其他部分都清楚

标签： javascript json parsing asynchronous rxjs

【解决方案1】：

好吧，我设法解决了这个问题。答案是将 concatMap 与 forkJoin 结合起来，如下所示：

这是项目中的代码：

this.presets$ =
      this.http.get('./assets/brushes/brushes.json')
          .map((res:Response) => res.json()["brushPresets"])
          .concatMap(objAr =>
              Observable.forkJoin(objAr.map(obj =>
                  this.loadImage(obj["image"])
                      .map(image => {
                        return new BrushPreset(obj["name"], image, BRUSH_FUNCTIONS[item["func"]], obj["scale"]);
                      })
                  )
              )
          );

编辑：

这是另一种解决方案。

this.presets$ =
      this.http.get('./assets/brushes/brushes.json')
          .map((res:Response) => res.json()["brushPresets"])
          .mergeMap(this.loadImage, (item, image) => {
            return new BrushPreset(
                item["name"],
                image,
                BRUSH_FUNCTIONS[item["func"]],
                item["scale"]);
          })
          .toArray()

【讨论】：