Angular 10 - Chained Promises on Array Don't Calculate All Properties - arrays

Question

I'm new to Angular and TypeScript, and have encountered a problem:
I have an array of objects of type LabObject model: my LabObject model has quite a lot of properties, along with two private properties that are calculated (private _labTest: number and private _vitalSign: number).
I create an array of type LabObject and populate it using a for loop. Naturally, I have noticed that these two calculations don't finish while the loop is still running, because they are quite heavy, so I figured I'd use a promise.
I thought if I ran the loop in the first promise, and then chained two promises after that, one for each calculation, it would force my calculations to finish running before I did anything else with that array.
It seems that I am wrong, as not all array elements wind up with calculated _labTest and _vitalSign, and in some elements either one or both of them are missing.
Here is my method:
createFile() {
let getLabObject = new Promise((resolve, reject) => {
let lab_objects: LabObject[] = [];
for (let i = 0; i < 10; i++) {
let lo = this.createLabObject();
lab_objects.push(lo);
}
resolve(lab_objects);
});
let getLabTest = objects => {
return new Promise((resolve, reject) => {
objects.forEach(item => {
item.CalculateLabTest();
});
resolve(objects);
});
};
let getVitalSign = objects => {
return new Promise((resolve, reject) => {
objects.forEach(item => {
item.CalculateVitalSign();
});
resolve(objects);
});
};
let backend = objects => {
this.http.post('my backend url address', JSON.stringify(objects))
.subscribe(responseData => {
console.log(responseData);
});
}
getLabObject.then(objects => {
return getLabTest(objects);
}).then(objects => {
return getVitalSign(objects);
}).then(objects => {
return backend(objects);
});
}
I get a JSON object that looks something like this:
[{id: 1, name: 'name1'},
{id: 2, name: 'name2', _labTest: 10},
{id: 3, name: 'name3', _vitalSign: 17},
{id: 4, name: 'name4', _labTest: 8, _vitalSign: 6}]
But I would like for the _labTest and _vitalSign to be calculated for each and every one of the elements.
What am I doing wrong?

Answer 1

I don't think you need promises for this. Actually the asynchronous code is probably the cause of the incomplete objects.
What you are looking for is a getter function. This lets you access a method that calculate a value as-if it is a property. So it is always correct and easy to access. Add a function to extract an object from your LabObject and you are ready to submit it to your backend.
Check this StackBlitz
app.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
labtest: LabObject[] = [];
ngOnInit() {
this.labtest.push( new LabObject( 2, 8 ) );
this.labtest.push( new LabObject( 2, 5 ) );
this.labtest.push( new LabObject( 34, 1 ) );
this.labtest.push( new LabObject( 10, 1 ) );
}
log() {
const json = this.labtest.map( labtest => labtest.as_object() );
console.log( JSON.stringify(json) );
// instead of logging you want to submit the JSON to your backend to do whatever you wanted to do...
}
}
class LabObject {
constructor(
public type_a_test: number,
public type_b_test: number
) {}
private get _labTests(): number {
return this.type_a_test + this.type_b_test;
}
private get _vitalSign(): number {
return 2;
}
public as_object(): object {
return {
labtests: this._labTests,
vitalsigns: this._vitalSign
}
}
}