Deciding to dive into Vue and Javascript, I attempted to streamline some code but ended up doing the opposite.
So here's the issue: I have a data object in vue:
eventOptions: {
eventType: {
data: [],
method: 'getEventTypeList',
service: 'ReportEventService',
},
eventSeverity: {
data: [],
service: 'ReportEventService',
method: 'getSeverityList',
},
eventImpact: {
data: [],
service: 'ReportEventService',
method: 'getBusinessImpactList',
},
eventStatus: {
data: [],
service: 'ReportEventService',
method: 'getEventStatusList',
},
},
My goal is to loop through this object and create a function like:
ReportEventService.getEventStatusList() async setEventOptions() {
const promises = Object.keys(this.eventOptions).map((key) => {
const { method, service } = this.eventOptions[key];
return new Promise(async (resolve, reject) => {
try {
const response = await service[method]();
resolve(response);
} catch (e) {
reject(e);
}
});
});
Promise.all(promises)
.then((responseArray) => {
Object.keys(this.eventOptions).forEach((key, index) => {
this.eventOptions[key]['data'] =
responseArray[index].data;
});
})
.catch((e) => console.log(e));
},
However, I encountered a problem.
This line causes an error:
const callback = service[method]();
Is there a way to combine two strings to create a functional execution? Although I do realize that this approach may be redundant, and it would be easier to simply list them out individually.
I experimented with:
const func = new Function(`${service}.${method}()`)
The resulting error is: TypeError: service[method] is not a function