I need some guidance on sending an array of HTTP requests in sequential order within my application. Here are the details:
Application Entities :
- Location - an entity with attributes:
FanZone fanZone
, andList<LocationAdministrator> locationAdmins
- FanZone - an entity with attribute:
List<FanZoneAdministrator> fanZoneAdmins
Idea:
- When a user fills out the form shown below and clicks "NEXT", a Location object is saved in one of my Angular services. This data will not be POSTed until the user completes filling in administrator information (the admin form appears after clicking "NEXT").
https://i.stack.imgur.com/guA4I.jpg
- After the user fills in the Location Information form from the picture above, they must then fill in the information for Location Administrators and Fan Zone Administrators using the form below.
https://i.stack.imgur.com/EHqpF.jpg
- Once the user successfully fills in the administrator forms as shown above, I want to register the Location entity (send a POST request). After the Location entity has been posted, I aim to send a series of HTTP POST requests to register a list of
LocationAdministrator
andFanZoneAdministrator
entities sequentially.
Angular code:
next() {
this.locationService.registerLocation(this.location).subscribe(
(response: Response) => {
console.log('Successfully registered Location!');
console.log(response.json());
},
(error: Response) => {
console.log('Error occurred while trying to register new Location');
}
);
var fanZoneAdmin: User;
this.registerFanZoneAdminForm.get('fanZoneAdminArray').value.forEach(element => {
console.log(element);
fanZoneAdmin = new User(element.username,element.password,element.email,element.firstName,element.lastName,element.city,element.phoneNumber, null,null,null,null, null,this.location.fanZone,null,new Role("FZA"),null);
this.usersService.registerFanZoneAdmin(fanZoneAdmin).subscribe(
(response: Response) => {
console.log('Successfully registered Fan Zone Administrator!');
console.log(response.json());
},
(error: Response) => {
console.log('Error occurred while trying to register new Fan Zone Administrator');
}
);
});
console.log('Submitting Location Administrator!')
var locationAdmin: Location;
this.registerLocationAdminForm.get('locationAdminArray').value.forEach(element => {
console.log(element);
locationAdmin = new User(element.username,element.password,element.email,element.firstName,element.lastName,element.city,element.phoneNumber, null, null,null, null, null,null,this.location, new Role("LA"),null);
this.usersService.registerLocationAdmin(locationAdmin).subscribe(
(response: Response) => {
console.log('Successfully registered Location Administrator!');
console.log(response.json());
},
(error: Response) => {
console.log('Error occurred while trying to register new Location Administrator');
}
);
});
console.log('DONE!')
}
NOTE:
this.registerFanZoneAdminForm.get('fanZoneAdminArray').value.forEach(element => {..})
is used because of FormArray
. The value is an Array<FanZoneAdministrators>
and each element represents a single FanZoneAdministrator
.
(This applies to registerLocationAdminForm.get('locationAdminArray').value.forEach(element=>{..})
as well.)
The sequence of HTTP requests should follow: Location -> List of Fan Zone Administrators -> List of Location Administrators
Any assistance on this matter would be highly appreciated!