从多个中获取单个数组

Question

我正在制作 Angular 应用程序，我正在制作一个 forEach 函数，其中包含服务，例如，

   this.data.forEach(function(element) => {
      this.appService.getRest(element.optionsUrl, localStorage.getItem('token')).subscribe(result => {
           element.options = result.data;
           this.getIntake(this.data);
         });
    });

在这里，我试图将来自服务的结果存储到element.options，然后我调用一个函数来取回用element.options 填充的data 值，因为只有从服务中我才能获得值options 所以在那之后我需要将此数据发送到一个函数并需要检索它..

result.data 是一个数组，它给出以下三个，[{"id":1,"name":"option1"}],[{"id":2,"name":"option2"}],[{"id":3,"name":"option3"}] 分别为三个..

在this.getIntake(data);函数中如果我console.log(data)

getIntake(data) {
 console.log(data);
}

然后它会多次使用相同的值给出相同的数组，例如..

[
{"name":"abc", value: "abc", optionUrl: "abcUrl", options: [{"id":1,"name":"option1"}]},
{"name":"def", value: "def", optionUrl: "defUrl", options: [{"id":2,"name":"option2"}]},
{"name":"ghi", value: "ghi", optionUrl: "ghiUrl",  options: [{"id":3,"name":"option3"}]}
]


[
{"name":"abc", value: "abc", optionUrl: "abcUrl", options: [{"id":1,"name":"option1"}]},
{"name":"def", value: "def", optionUrl: "defUrl", options: [{"id":2,"name":"option2"}]},
{"name":"ghi", value: "ghi", optionUrl: "ghiUrl",  options: [{"id":3,"name":"option3"}]}
]

[
{"name":"abc", value: "abc", optionUrl: "abcUrl", options: [{"id":1,"name":"option1"}]},
{"name":"def", value: "def", optionUrl: "defUrl", options: [{"id":2,"name":"option2"}]},
{"name":"ghi", value: "ghi", optionUrl: "ghiUrl",  options: [{"id":3,"name":"option3"}]}
]

由于data有3个对象，所以反射了3次..

对于每个对象都有 element.optionsUrl，我需要订阅它并需要将数据存储在 element.options 中，如果我退出服务，我没有得到选项中的值，所以我在里面创建一个函数服务并将this.data 和options 传递给它。在该函数中，我正在获取带有值的数据，但我只需要获取一次完全填充的数据，但它给出了三个，因为数据有三个对象。从那如何得到最后一个填充数据的数组，而不是三个。

Stackblitz https://stackblitz.com/edit/angular-kwvjqu

由于服务延迟，我正在服务的运行时调用函数并发送数据..

如何使用纯 angular/typescript、javascript 方式从这个多个生成的数组中只获取一个数组？？

Answer 1

由于您在 forEach 中为数组中的每个元素触发请求，因此它将订阅多次，因此您会看到它记录了 3 次。

RxJS 提供帮助。

而不是使用from 循环通过您的Array 和forEach 使用from，它将您的Array 转换为Observable 的数组，然后您可以使用它来执行操作，例如触发http 请求。

from(this.data)  //Converts your data array to array of Observables
.pipe(
    mergeMap(element => {
        return this.appService.getRest(element.optionsUrl, localStorage.getItem('token')) //fires http request for each element
        .pipe(
            map((result) => {  //change the data
                element.options = result.data;
                return of(element); //returns an observable for each element
            })
        )
    }),
    combineAll() //combines all the observable into one
)
.subscribe(x=>{
    this.getIntake(x); //x contains an array of your element
});