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

我有一个包含以下内容的json文件：

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

我需要构造一个具有以下属性的笔刷预设对象数组：

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

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

loadImage（url:string）方法已经实现，并返回可观察的

如何实现加载此json文件并返回的方法

Observable< BrushPreset[]>

Observable

嗯，我设法解决了这个问题。 答案是将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()

---

请查看指南。正如目前所表达的，你的问题过于宽泛，没有任何研究或试图解决问题的迹象。对不起，你也可以复习。如果我的任何尝试都没有成功，我怎么能证明我正在努力解决这个问题呢？我在看mergeMap，concatMap，forkJoin。但没有找到合适的运营商组合来解决问题。我只是把自己弄糊涂了。因此，我试图尽可能清楚地说明问题，而不是那些不起作用的尝试。如果你的一次尝试成功，那么你就不会有问题。绝大多数发帖的人都是这样。但是，建议您展示您所做的研究（参见指南），以及您所遇到但尚未解决的问题。在许多情况下，这涉及到显示一些您尝试过但不起作用的代码。第二，正如你的问题所表达的，它太宽泛了：加载一个json文件，加载一个图像等等。每一个问题都可能是自己的问题（如何加载文件？）。我特别建议你看看其他问题，无论你遇到什么问题，你都可能遇到过其他人，并且有一个相关的问题和答案，因此你通常可以从中得出至少部分的解决方案。这不是我问的第一个问题。我也知道这个系统是如何运作的。->这些问题中的每一个都可能是自己的问题（如何加载文件？）。最后强调了我感兴趣的问题。其他部分很清楚