从多个中获取单个数组

Posted 2023-03-13

【中文标题】从多个中获取单个数组

【英文标题】：Fetch single array from multiple

【发布时间】：2019-05-08 20:44:13

【问题描述】：

我正在制作 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 方式从这个多个生成的数组中只获取一个数组？？

【问题讨论】：

您可以创建一个不允许重复的Set()。不确定是否需要创建重复数据的能力...

为什么要为数组中的每个元素记录整个数组？

如果我退出服务，那么我将丢失存储的选项数据，因此我在服务内拨打电话..

为什么要遍历它而不是传递整个数组呢？

@Justcode，我正在迭代this.data，因为我有optionUrl，我将从那里获取options 的数据，所以我在forEach 内部进行服务调用。如果我停止服务，我无法获取数据，因此无法在服务调用中传递它。所以选项值将在服务内部设置，所以我试图在this.getIntake(this.data) 函数中发送this.data 并尝试获取并且已知它会返回三个.. 我怎样才能只得到一个.. 有没有其他选择请帮助我..

【参考方案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
);

【讨论】：

我可以像这样stackblitz.com/edit/async-await-angular-demo-ae24ur 使用服务调用来进行stackblitz 吗？如果您通过修改上述stackblitz 来实施您的解决方案将会很有帮助。