时间戳

首页 > 解决方案 > 从多个中获取单个数组

javascript - 从多个中获取单个数组

问题描述

我正在制作有角度的应用程序，我正在制作一个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，然后我调用一个函数来取回data填充的值，element.options因为只有从服务中我才能获得值，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有三个物体，所以它被反射了三遍。

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

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

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

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

标签： javascriptarraysangulartypescriptangular6

解决方案

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

RxJS 提供帮助。

它不是循环遍历你的Arraywith forEachuse 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
});

推荐阅读