What is the best way to merge three arrays of data into a single iterable array?

I am working on a function that fetches data from an API. In this process, I execute a total of 3 queries, each returning an array of data. My goal is to combine these 3 arrays into a single iterable array, where the indexes correspond to the original arrays (0 for first array, 1 for second, and so on). Could you please suggest a way to achieve this?

//I attempted to implement this approach, but it resulted in an error.
this.serviceAffaire.getAffairesByServiceAndOperateur(this.servEnCours, this.opeEnCours).pipe(
        affaires =>
          forkJoin(
            this.serviceAffaire.getAffairesByServiceAndOperateurAleas(this.servEnCours, this.opeEnCours),
            this.serviceAffaire.getAffairesByServiceAndOperateurUrgent(this.servEnCours, this.opeEnCours),
          ).pipe(
            map(([affairesAleas, affairesUrgent]) => [affairesAleas, affairesUrgent])
          )
      ).subscribe((data : [Affaire, Affaire, Affaire][]) => {
        for(let d of data){
          for(let n of d[0])
           //Encountered an error in the for loop condition, indicating that Type Affaire must have a Symbol.iterator method that returns an iterator. 
        }
      })

Answer №1

Here is a helpful solution for you to try out. Use the forkJoin function to gather responses from three different arrays, which will result in an array of Affaire[][]. To simplify this into a one-dimensional array, apply the flat() method.

forkJoin(
this.serviceAffaire.getAffairesByServiceAndOperateurAleas(this.servEnCours, this.opeEnCours),
this.serviceAffaire.getAffairesByServiceAndOperateur(this.servEnCours, this.opeEnCours),
this.serviceAffaire.getAffairesByServiceAndOperateurUrgent(this.servEnCours, this.opeEnCours))
.pipe(map(arr=>[...arr[0],...arr[1],...arr[2]])).subscribe(console.log)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generate a new data structure by pairing keys with corresponding values from an existing

Imagine having a type named Foo type Foo = { a: string; b: number; c: boolean; } Now, I am looking to create a type for an object containing a key and a value of a designated type T. The goal is for the value's type to be automatically determin ...

Implement real-time word counting in Angular as users type

I am looking to monitor word count in real-time as a user enters text into a textarea field If the word limit of 100 is exceeded, further typing should be restricted I aim to display the word count dynamically as the user types wordCounter() This functi ...

how to use all parameters except the first one in TypeScript

Is there a way to reference one function's parameter types in another function, but only use a subset of them without repeating the entire list of parameters? //params of bar should be same as foo, except p1 should be a different type function foo(p1 ...

Heroku error: unable to locate tsc despite exhaustive troubleshooting efforts

I've been attempting to deploy a basic nodejs app on heroku, but I keep encountering the error mentioned above. Despite trying various solutions provided here, nothing seems to resolve the issue. Here's a summary of what I've attempted so fa ...

Issue encountered during NPM compilation

Just starting with angularjs, I have a project file in the angular framework which is new to me. We have two project files - one works fine, but the other does not. The problematic project file has a .bin folder and runs smoothly, while the current one we ...

Issue with scrollIntoView in devices with a width lower than 1200px

In my Angular 5 project, I have a table where each row is generated dynamically using *ngFor and given an id based on the username. <tbody *ngFor="let User of FullTable; let i = index"> <tr id='{{User.username}}'> <th scope="r ...

What is the best way to restrict the suggested values in a property depending on the value of another property?

I'm working on creating a third interface that depends on the value of properties from two other interfaces, while also introducing a unique third property. I've chosen not to extend the third property from the first two interfaces as it may not ...

Testing Angular - using observables that return varying values

I'm currently faced with the challenge of testing a component that subscribes to an observable in a service during its ngOnInit lifecycle hook. The component's behavior is expected to change based on the value received from the observable. To sim ...

In the desktop view, the onClick button requires two clicks to trigger the onClick function, while in the mobile view, it only takes one click as expected

Here are the topics I want to display as buttons: const paperTopics = [ "Teaching Aptitude", "Research Aptitude", "Comprehension", "Communication", "Mathematical Reasoning and Aptitude", ...

Storing Bearer Tokens in Angular from Response Headers

After sending a login post request, I received a response. Everything looks good except the fact that the response body is empty and I am unsure how to access (and store locally) the Bearer token. Currently, this is what I can log: https://i.sstatic.net/N ...

The element is implicitly assigned an 'any' type due to the fact that an expression of type 'any' cannot be used to index types in nodejs and solidity

I am in need of setting networks in my contract using NodeJS and TypeScript. Below is the code I have written: let networkId: any = await global.web3.eth.net.getId(); let tetherData = await Tether.networks[networkId]; Unfortunately, I encountered ...

Can dynamic placeholders be implemented for Angular 6 material inputs?

Currently, I am attempting to dynamically adjust the placeholder of a Material input field based on calculations that are taking place in the background. These calculations derive from the user's responses to other questions on the form. I have exper ...

Angular: failure to update a specific portion of the view

I'm currently working on a directive template that features the following code snippet: <div class="colorpicker"> <div>Chosen color</div> <div class="color_swatch" style="background-color: {{ngModel}}">&nbsp;</div> & ...

Is it possible to pass a Styled Components Theme as Props to a Material UI element?

After spending 9 hours scouring the internet for a solution, I am at my wit's end as nothing seems to work. Currently, I am developing a React component using TypeScript. The issue lies with a simple use of the Material UI Accordion: const Accordion ...

Angular is encountering a CORS issue with the "No Access-Control-Allow-Origin" error when trying to access a CSS file

Currently, in my Angular 5 application with a Web API back-end, my main goal is to reference a CSS file on a production server. I'm facing a cross-origin issue when trying to access the CSS file hosted on the IIS server website. Even though CORS is e ...

Is there a way to dynamically assign values to [routerLink] based on the elements in an array?

Looking to create a dynamic routing within my template. The routing values are sourced from an array that is being iterated through with ngFor. Additionally, I need to perform some transformations on these string values. Any help would be appreciated. En ...

retrieve data types from an array of object values

I am looking to extract types from an array of objects. const names = [ { name: 'Bob' }, { name: 'Jane' }, { name: 'John' }, { name: 'Mike' }, ] The desired result should resemble thi ...

Encountering an issue with d3 Angular 2 pie chart related to d3.arc data

I encountered a problem with my code: 'PieArcDatum' is not assignable to parameter of type 'DefaultArcObject.' at this specific line Argument of type return "translate(" + labelArc.centroid(d) + ")";. Could someone please assist me in ...

Unable to establish headers once they have been issued - routing error

I have come across various solutions for this problem, but I am struggling to resolve it on my own. Therefore, I am sharing my code here in hopes of receiving assistance. I am new to this and would appreciate any help in understanding and fixing the issue ...

Dynamically set the value of a form in <mat-select> using binding

In my 'div' element, I have implemented a "mat-select" feature that contains a dropdown of country lists in a multi-select format. I am looking to automate the process of populating the countries within the "mat-select" when a button is clicked. ...