logo
down
shadow

Combine requests in series - Angular 7


Combine requests in series - Angular 7

By : user2185424
Date : November 21 2020, 04:01 AM
I wish this helpful for you I'm trying to chain a few requests in a series, something like forkJoin but the requests NOT being requested in parallel. Here's what I have so far: , Here's what ended up working:
code :
import { toArray } from 'rxjs/operators';
import { concat } from 'rxjs';

let nodeDetails = this.http.get('node/1/')
let nodeParents = this.http.get('nodeParents/1/')
let nodeTree = this.http.get('nodeTree/1/')
let nodeUsers = this.http.get('nodeUsers/1/')
let nodeDocuments = this.http.get('nodeDocuments/1/')
const requests = concat(nodeDetails, nodeParents, nodeTree, nodeUsers, nodeDocuments)

requests
    .pipe(toArray())
    .subscribe(responses => {
        // Array of responses
    })


Share : facebook icon twitter icon
Angular 4. A series of http requests get cancelled

Angular 4. A series of http requests get cancelled


By : C.Lewis
Date : March 29 2020, 07:55 AM
wish of those help I've found a potential reason of this behavior.
to https://github.com/ghetolay and https://github.com/dklmuc
code :
for (let i = 1; i < 50; i++) {
    http.get(`https://swapi.co/api/people/${i}`).subscribe((result) => {
        console.log(i, result);
    });
}
Angular 4 combine data from multiple HTTP requests

Angular 4 combine data from multiple HTTP requests


By : Sarvam Ariwala
Date : March 29 2020, 07:55 AM
Any of those help You can use the switchMap operator (alias of flatMap) in the following code :
code :
// Observables mocking the data returned by http.get()
const studentObs = Rx.Observable.from([
  {"ID" : 1 , "SchoolCode": "A150", "UserID": 1 }, 
  {"ID" : 5 , "SchoolCode": "A140" , "UserID": 4}, 
  {"ID" : 9 , "SchoolCode": "C140" , "UserID": 3}
]);
const userObs = Rx.Observable.from([
  {"ID" : 1, "Name": "Rick" , "FamilyName": "Grimes" },
  {"ID" : 3, "Name": "Tom" , "FamilyName": "Cruise" },
  {"ID" : 4, "Name": "Amy" , "FamilyName": "Poehler" }
]);
// Return an observable emitting only the given user.
function getUser(userID) {
  return userObs.filter(user => user.ID === userID);
}

studentObs
  .switchMap(student => {
     return getUser(student.UserID).map(user => {
       // Merge the student and the user.
       return Object.assign(student, {user: user});
     })
  })
  .subscribe(val => console.log(val));
Angular combine data from multiple http requests

Angular combine data from multiple http requests


By : Paulyj87
Date : March 29 2020, 07:55 AM
it should still fix some issue If you want to ask for different products in parallel you can use forkJoin operator:
code :
getData(productIds: Array<string>): Observable<any> {  
  const data = productIds.map(element => {
     const path = this.serverUrl + '?' + 'productid=' + element;
     return this.httpClient.get(path);
  };
  return forkJoin(...data);
}
Angular and RxJs combine two http requests

Angular and RxJs combine two http requests


By : Normalize
Date : March 29 2020, 07:55 AM
To fix the issue you can do Maybe forkJoin is the one you are looking for ?
forkJoin work best with Http call and I'm using it a lot when dealing with http request
code :
// RxJS v6.5+
import { ajax } from 'rxjs/ajax';
import { forkJoin } from 'rxjs';

/*
  when all observables complete, provide the last
  emitted value from each as dictionary
*/
forkJoin(
  // as of RxJS 6.5+ we can use a dictionary of sources
  {
    google: ajax.getJSON('https://api.github.com/users/google'),
    microsoft: ajax.getJSON('https://api.github.com/users/microsoft'),
    users: ajax.getJSON('https://api.github.com/users')
  }
)
  // { google: object, microsoft: object, users: array }
  .subscribe(console.log);
Angular 8 make multiple http requests and combine all results

Angular 8 make multiple http requests and combine all results


By : loxeen
Date : March 29 2020, 07:55 AM
To fix the issue you can do your code is correct since that is the expected behavior of forkjoin you just need to map it a little bit
code :
forkJoin([res1, res2, res3, res4, res5])
.pipe(map(data => data.reduce((result,arr)=>[...result,...arr],[])))
.subscribe(data =>{

  this.autoCompleteValues = data;
  console.log(this.autoCompleteValues);
});
Related Posts Related Posts :
  • Test observable 'next' callback in RxJs and Angular
  • How to pass Form Control value to custom Validator Function's Parameter in Angular 5 Reactive Forms
  • Angular 6 - NullInjectorError: No provider for HttpClient in unit tests
  • How to get the text from a parent element only and not from its children - Protractor
  • Getter Methods on Deserialized Objects in Typescript
  • Child routes inside lazy loaded module not activated
  • Get "Day" of Selected Date in ngb-datepicker (ng Bootstrap) in Angular Application
  • Make nested HTTP calls from a Service Class and return Observable
  • Angular 6 reuse onclick event
  • Show loading indicator in Angular while waiting for a RxJS observable
  • ERROR TypeError: (intermediate value).share is not a function
  • angular 4 typescript validation error Object literal may only specify known properties
  • Angular, using one component in other two components
  • ngx-select-dropdown -- how to set default value for the dropdown? (angular 6.x)
  • Angular - reference child component dynamically
  • RXJS - Filter appears to filter, but results still show unfiltered
  • How to make changes on value which came with @Input - Angular
  • QR Scan in Angular
  • Angular / API consuming - request header - CORS proxy
  • Ng If does not work in observable variable in Angular 6
  • Angular Material 7: Link for whole row
  • How to customize PrimeNG TurboTable paginator?
  • ExpressionChangedAfterItHasBeenCheckedError when using ReactiveForms and NgbModal
  • Angular Material table with right-to-left direction
  • Angular 7 how to calculate the time a component take to completely load on the DOM
  • Observerable appending data over and over again on populate action
  • this is not a function - Angular 5
  • angular app runs in local tomcat but gives error in dev environment
  • Angular: Pass data from Material Dialog to component, which didn't open the dialog
  • Keep the the alert box without dismiss if there is an error
  • Textarea typing issue in ngFor in Angular 6
  • fxFlex angular flex layout not working as expected version 7.0.0-beta.19
  • Display table for dyanamically created row in angular 5
  • ngFor does not render my obersavle response, but it does inset old values I add to the array?
  • Concat variable name in angular cli using ngFor
  • Angular 5 'inputClick' is declared but its value is never read
  • Angular 7 - getting error as `Module parse failed: Unexpected character '@'` how to fix this?
  • RxJs subscribeTo.js observable check works in Chrome, but fails in Chrome Incognito, MS Edge, and Firefox
  • Getting the error: Could not find column with id "id"
  • Angular 5 - Dynamic base reference is causing duplicate loading of bundles|chunks
  • Angular - use a service in a function and this function in a pipe
  • How to dynamically call the parent methods from child component?
  • Trigger same function in different component
  • Angular 7 error RangeError: Maximum call stack size exceeded
  • Maximum call stack size exceeded when adding PWA in Angular
  • angular reactive forms remove formArray elements after save
  • check whether angular array object has a specified value or not
  • While using moment in Angular 7 getting Error:TypeError: moment is not a function
  • Cannot set property 'filterPredicate' of undefined error in Angular Material Table
  • Angular 2+ Animation: Adding checkbox check effect to individual checkboxes that are generated by a loop
  • I am having issue in checking whether a username exists or not in my angular 6 application via api
  • How can I convert an ionic http GET request from @angular\Http to @ion-native\Http?
  • fa-icon is not a known element in a Reusable Module
  • Angular 6: Is it possible to pass a function as parameter?
  • Angular Reactive Forms with FormArray inside a nested FormGroup
  • Angular: Right way to wait for Async data to be loaded
  • NgRX effect called with empty state
  • How do you create a union type for a component's services?
  • Angular6 - Using service outside of constructor - error as undefined
  • How to import a service from another module in Angular 6
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org