I have a service set up with some static objects that are being utilized in my UI.
fetchRulesVariables()
fetchRuleVariables() {
let variables = [
{
name: 'Credit Funding Type',
id: 1,
multiple: false,
hasOperators: true,
availableOperators: this.fetchOperators('inResults'),
inputType: 'single',
placeholder: 'Select a funding type',
availableValues: this.fetchFundingInstraments()
}, {
name: 'Device Trust Score',
id: 2,
multiple: false,
hasOperators: true,
availableOperators: this.fetchOperators('gtltResults'),
inputType: 'text',
placeholder: 'Enter a value between 0 - 100',
availableValues: ''
}
]
return variables;
}
This object calls another function that adds additional data arrays like availableOperators and availableValues. These values are also static JSON objects.
In my component, I am retrieving this data by ID using the lodash library.
fetchVariableData(id, type) {
let data = [];
switch (type) {
case 'operators':
data = _.find(this.variables, {id}).availableOperators;
break;
}
return data;
}
In my component's HTML, I am using an ngFor directive to display the results fetched by my function.
<li *ngFor="let x of fetchVariableData(1, 'operators')"></li>
The problem arises from async issues. When attempting to run this code, I encounter an error stating that availableOperators is undefined. However, if I manually input the operators into my fetchVariableData() function, it works as expected.
How can I address this async issue where it seems like availableOperators is being accessed before it's ready?
All the data used here is static JSON, with no external HTTP requests taking place.
Edit1
Component Code:
export class AddRuleComponent implements OnInit {
variables: any;
ngOnInit() {
this.loadVars();
this.renderAddRuleForm();
}
loadVars() {
this.outcomes = this._mserv.fetchOutcomeTypes();
this.variables = this._mserv.fetchRuleVariables();
}
fetchVariableData(id, type) {
let data: any;
switch (type) {
case 'operators':
data = _.find(this.variables, {
id
}).availableOperators;
break;
}
return data;
}
}
Service Code:
fetchRuleVariables() {
let variables = [
{
name: 'Credit Funding Type',
id: 1,
multiple: false,
hasOperators: true,
availableOperators: this.fetchOperators('inResults'),
inputType: 'single',
placeholder: 'Select a funding type',
availableValues: this.fetchFundingInstraments()
}, {
name: 'Device Trust Score',
id: 2,
multiple: false,
hasOperators: true,
availableOperators: this.fetchOperators('gtltResults'),
inputType: 'text',
placeholder: 'Enter a value between 0 - 100',
availableValues: ''
}
]
return variables;
}
fetchOperators(type) {
let operators = [];
// Based on the set of operators we want
switch (type) {
// In Results
case 'inResults':
operators.push({
name: 'In List',
id: 1,
}, {
name: 'Not In List',
id: 2,
});
break;
// Greater than & Less than
case 'gtltResults':
operators.push({
name: 'Greater Than <',
id: 3,
}, {
name: 'Less Than >',
id: 4,
});
break;
// Is / is not
case 'isisnot':
operators.push({
name: 'Is',
id: 5,
}, {
name: 'Is Not',
id: 6,
});
break;
}
return operators;
}
HTML Code:
<select class="form-control input-sm" formControlName="operator" [attr.id]="'operator'+i">
<option value="">Select an Operator</option>
<option *ngFor="let o of fetchVariableData(1, 'operators') | values" value="{{ o.id }}">{{ o.name }}</option>
</select>
Values Pipe:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'values', pure: false })
export class ValuesPipe implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value).map(key => value[key]);
}
}