Angular 6 - nested Firebase requests
I have the code below:
Shifts depend on locations, locations depend on cities and
this.getCities(), this.getEmployerLocations() and this.getEmployerShifts()calls return Observables
export class Employer {
cities : string;
locations : Location;
shifts : Sift;
constructor() {
this.prepareShifts();
}
this.prepareShifts() {
}
this.getCities().subscribe( cities => {
this.cities = cities;
this.getEmployerLocations().subscribe( locations => {
this.locations = locations;
this.locations.forEach( location => {
location.city = this.getCityById( location.cityId ); // from cities received: this.cities
});
this.getEmployerShifts().subscribe( shifts => {
this.shifts = shifts;
thi.shifts.forEach( shift => {
this.shift.location = this.getShiftLocationById( shift.locationId ); // from locations received: this.locations
});
});
);
});
}
As you can see I need to fill out cities, locations and shifts by values from Firebase. And I did nested calls to achieve the goal.
I wonder is there a proper way to have it done? I have a feeling I do it wrong.
angular firebase edited Nov 26 '18 at 12:24
Milad Bahmanabadi
852718
asked Nov 26 '18 at 10:18
Angry BeaverAngry Beaver
548
add a comment |
I have the code below:
Shifts depend on locations, locations depend on cities and
this.getCities(), this.getEmployerLocations() and this.getEmployerShifts()calls return Observables
export class Employer {
cities : string;
locations : Location;
shifts : Sift;
constructor() {
this.prepareShifts();
}
this.prepareShifts() {
}
this.getCities().subscribe( cities => {
this.cities = cities;
this.getEmployerLocations().subscribe( locations => {
this.locations = locations;
this.locations.forEach( location => {
location.city = this.getCityById( location.cityId ); // from cities received: this.cities
});
this.getEmployerShifts().subscribe( shifts => {
this.shifts = shifts;
thi.shifts.forEach( shift => {
this.shift.location = this.getShiftLocationById( shift.locationId ); // from locations received: this.locations
});
});
);
});
}
As you can see I need to fill out cities, locations and shifts by values from Firebase. And I did nested calls to achieve the goal.
I wonder is there a proper way to have it done? I have a feeling I do it wrong.
angular firebase edited Nov 26 '18 at 12:24
Milad Bahmanabadi
852718
asked Nov 26 '18 at 10:18
Angry BeaverAngry Beaver
548
Did you checkasyncawaitsyntax of javascript ?
– user1608841
Nov 26 '18 at 10:24
orswitchMapin rxjs
– user1608841
Nov 26 '18 at 10:26
add a comment |
I have the code below:
Shifts depend on locations, locations depend on cities and
this.getCities(), this.getEmployerLocations() and this.getEmployerShifts()calls return Observables
export class Employer {
cities : string;
locations : Location;
shifts : Sift;
constructor() {
this.prepareShifts();
}
this.prepareShifts() {
}
this.getCities().subscribe( cities => {
this.cities = cities;
this.getEmployerLocations().subscribe( locations => {
this.locations = locations;
this.locations.forEach( location => {
location.city = this.getCityById( location.cityId ); // from cities received: this.cities
});
this.getEmployerShifts().subscribe( shifts => {
this.shifts = shifts;
thi.shifts.forEach( shift => {
this.shift.location = this.getShiftLocationById( shift.locationId ); // from locations received: this.locations
});
});
);
});
}
As you can see I need to fill out cities, locations and shifts by values from Firebase. And I did nested calls to achieve the goal.
I wonder is there a proper way to have it done? I have a feeling I do it wrong.
angular firebase edited Nov 26 '18 at 12:24
Milad Bahmanabadi
852718
asked Nov 26 '18 at 10:18
Angry BeaverAngry Beaver
548
I have the code below:
Shifts depend on locations, locations depend on cities and
this.getCities(), this.getEmployerLocations() and this.getEmployerShifts()calls return Observables
export class Employer {
cities : string;
locations : Location;
shifts : Sift;
constructor() {
this.prepareShifts();
}
this.prepareShifts() {
}
this.getCities().subscribe( cities => {
this.cities = cities;
this.getEmployerLocations().subscribe( locations => {
this.locations = locations;
this.locations.forEach( location => {
location.city = this.getCityById( location.cityId ); // from cities received: this.cities
});
this.getEmployerShifts().subscribe( shifts => {
this.shifts = shifts;
thi.shifts.forEach( shift => {
this.shift.location = this.getShiftLocationById( shift.locationId ); // from locations received: this.locations
});
});
);
});
}
As you can see I need to fill out cities, locations and shifts by values from Firebase. And I did nested calls to achieve the goal.
I wonder is there a proper way to have it done? I have a feeling I do it wrong.
angular firebase angular firebase edited Nov 26 '18 at 12:24
Milad Bahmanabadi
852718
asked Nov 26 '18 at 10:18
Angry BeaverAngry Beaver
548
edited Nov 26 '18 at 12:24
Milad Bahmanabadi
852718
asked Nov 26 '18 at 10:18
Angry BeaverAngry Beaver
548
edited Nov 26 '18 at 12:24
Milad Bahmanabadi
852718
edited Nov 26 '18 at 12:24
Milad Bahmanabadi
852718
edited Nov 26 '18 at 12:24
Milad Bahmanabadi
852718
852718
asked Nov 26 '18 at 10:18
Angry BeaverAngry Beaver
548
asked Nov 26 '18 at 10:18
Angry BeaverAngry Beaver
548
asked Nov 26 '18 at 10:18
Angry BeaverAngry Beaver
548
548
Did you checkasyncawaitsyntax of javascript ?
– user1608841
Nov 26 '18 at 10:24
orswitchMapin rxjs
– user1608841
Nov 26 '18 at 10:26
add a comment |
Did you checkasyncawaitsyntax of javascript ?
– user1608841
Nov 26 '18 at 10:24
orswitchMapin rxjs
– user1608841
Nov 26 '18 at 10:26
Did you check
async await syntax of javascript ?– user1608841
Nov 26 '18 at 10:24
Did you check
async await syntax of javascript ?– user1608841
Nov 26 '18 at 10:24
or
switchMap in rxjs– user1608841
Nov 26 '18 at 10:26
or
switchMap in rxjs– user1608841
Nov 26 '18 at 10:26
add a comment |
1 Answer
1
active
oldest
votes
You can use flatMap operator of RxJs.
It is great for nested async operations. There are some other similar operators, flatMap is the one I usually use. When you use flatMap, it is just like map operator in which you return a scalar object. With flatMap you return another observable. At the end, you can subscribe to the latest observable.
Here is how you can do it
import { flatMap } from 'rxjs/operators';
this.getCities().pipe(
flatMap(cities => {
this.cities = cities;
return this.getEmployerLocations();
}),
flatMap(locations => {
this.locations = locations;
this.locations.forEach( location => {
location.city = this.getCityById( location.cityId ); // from cities received: this.cities
});
return this.getEmployerShifts();
})
).subscribe(shifts => {
this.shifts = shifts;
this.shifts.forEach( shift => {
this.shift.location = this.getShiftLocationById( shift.locationId ); // from locations received: this.locations
});
});
answered Nov 26 '18 at 10:26
Bunyamin CoskunerBunyamin Coskuner
4,07011036
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53478974%2fangular-6-nested-firebase-requests%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use flatMap operator of RxJs.
It is great for nested async operations. There are some other similar operators, flatMap is the one I usually use. When you use flatMap, it is just like map operator in which you return a scalar object. With flatMap you return another observable. At the end, you can subscribe to the latest observable.
Here is how you can do it
import { flatMap } from 'rxjs/operators';
this.getCities().pipe(
flatMap(cities => {
this.cities = cities;
return this.getEmployerLocations();
}),
flatMap(locations => {
this.locations = locations;
this.locations.forEach( location => {
location.city = this.getCityById( location.cityId ); // from cities received: this.cities
});
return this.getEmployerShifts();
})
).subscribe(shifts => {
this.shifts = shifts;
this.shifts.forEach( shift => {
this.shift.location = this.getShiftLocationById( shift.locationId ); // from locations received: this.locations
});
});
answered Nov 26 '18 at 10:26
Bunyamin CoskunerBunyamin Coskuner
4,07011036
add a comment |
You can use flatMap operator of RxJs.
It is great for nested async operations. There are some other similar operators, flatMap is the one I usually use. When you use flatMap, it is just like map operator in which you return a scalar object. With flatMap you return another observable. At the end, you can subscribe to the latest observable.
Here is how you can do it
import { flatMap } from 'rxjs/operators';
this.getCities().pipe(
flatMap(cities => {
this.cities = cities;
return this.getEmployerLocations();
}),
flatMap(locations => {
this.locations = locations;
this.locations.forEach( location => {
location.city = this.getCityById( location.cityId ); // from cities received: this.cities
});
return this.getEmployerShifts();
})
).subscribe(shifts => {
this.shifts = shifts;
this.shifts.forEach( shift => {
this.shift.location = this.getShiftLocationById( shift.locationId ); // from locations received: this.locations
});
});
answered Nov 26 '18 at 10:26
Bunyamin CoskunerBunyamin Coskuner
4,07011036
add a comment |
You can use flatMap operator of RxJs.
It is great for nested async operations. There are some other similar operators, flatMap is the one I usually use. When you use flatMap, it is just like map operator in which you return a scalar object. With flatMap you return another observable. At the end, you can subscribe to the latest observable.
Here is how you can do it
import { flatMap } from 'rxjs/operators';
this.getCities().pipe(
flatMap(cities => {
this.cities = cities;
return this.getEmployerLocations();
}),
flatMap(locations => {
this.locations = locations;
this.locations.forEach( location => {
location.city = this.getCityById( location.cityId ); // from cities received: this.cities
});
return this.getEmployerShifts();
})
).subscribe(shifts => {
this.shifts = shifts;
this.shifts.forEach( shift => {
this.shift.location = this.getShiftLocationById( shift.locationId ); // from locations received: this.locations
});
});
answered Nov 26 '18 at 10:26
Bunyamin CoskunerBunyamin Coskuner
4,07011036
You can use flatMap operator of RxJs.
It is great for nested async operations. There are some other similar operators, flatMap is the one I usually use. When you use flatMap, it is just like map operator in which you return a scalar object. With flatMap you return another observable. At the end, you can subscribe to the latest observable.
Here is how you can do it
import { flatMap } from 'rxjs/operators';
this.getCities().pipe(
flatMap(cities => {
this.cities = cities;
return this.getEmployerLocations();
}),
flatMap(locations => {
this.locations = locations;
this.locations.forEach( location => {
location.city = this.getCityById( location.cityId ); // from cities received: this.cities
});
return this.getEmployerShifts();
})
).subscribe(shifts => {
this.shifts = shifts;
this.shifts.forEach( shift => {
this.shift.location = this.getShiftLocationById( shift.locationId ); // from locations received: this.locations
});
});
answered Nov 26 '18 at 10:26
Bunyamin CoskunerBunyamin Coskuner
4,07011036
answered Nov 26 '18 at 10:26
Bunyamin CoskunerBunyamin Coskuner
4,07011036
answered Nov 26 '18 at 10:26
Bunyamin CoskunerBunyamin Coskuner
4,07011036
answered Nov 26 '18 at 10:26
Bunyamin CoskunerBunyamin Coskuner
4,07011036
4,07011036
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53478974%2fangular-6-nested-firebase-requests%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you check
asyncawaitsyntax of javascript ?– user1608841
Nov 26 '18 at 10:24
or
switchMapin rxjs– user1608841
Nov 26 '18 at 10:26