Angularjs function performance causing data loading issues. - angularjs

Question

This is the function I am using to retrieve a report from my backend and then goes through a mapping process to map keys from another array to the keys each array in the object are grouped by. The getReport() function request the data from the backend initially but the data comes back empty after it is mapped the first time. As soon as the data is requested again it all works perfectly.
function getReport() {
vm.loading = true;
vm.selectedReport.reportFunc(location._id, vm.beginDate, vm.endDate, vm.orderStatus.value)
.then(report => {
switch(vm.selectedReport.name) {
case 'Sales by Section':
getSectionIds();
vm.report = prepareSectionsReport(report);
vm.mergedSectionReport = prepareLineItemSales(vm.report).filter( (line) => {
if (line) {
return line;
}
});
break;
default:
vm.report = report;
break;
}
vm.loading = false;
});
}
function prepareSectionsReport(report) {
var r = Object.keys(report).map( (sectionId) => {
for (var section of sections) {
if (section && section.sectionId === sectionId) {
let total = report[sectionId].slice(-1)[0];
return {
sectionName: section.name,
section: report[sectionId],
total: total
};
} else if (sectionId === 'N/A') {
let total = report[sectionId].slice(-1)[0];
return {
sectionName: 'N/A',
section: report[sectionId],
total: total
}
}
}
});
r = removeUndefined(r);
return r;
}

Answer 1

Problem was caused by the order the functions were loading and was solved using promises.
function getReport() {
vm.loading = true;
vm.selectedReport.reportFunc(location._id, vm.beginDate, vm.endDate, vm.orderStatus.value)
.then(report => {
switch(vm.selectedReport.name) {
case 'Sales by Section':
prepareSectionsReport(report).then( (r) => {
vm.report = r;
return vm.report;
}).then( (r) => {
vm.mergedSectionReport = prepareLineItemSales(vm.report).filter( (line) => {
if (line) {
return line;
}
});
});
break;
default:
vm.report = report;
break;
}
vm.loading = false;
});
}
function getSectionIds() {
return MenuService.query({ location: location._id }).$promise
}
function prepareSectionsReport(report) {
return getSectionIds().then( (menus) => {
menus[0].sections.forEach( (section) => {
vm.sections.push( {
sectionId: section._id,
name: section.name
});
});
}).then( () => {
console.time('sections');
var r = Object.keys(report).map( (sectionId) => {
/* On initial load does not execute this section properly on execute */
for (var section of vm.sections) {
if (section && section.sectionId === sectionId) {
let total = report[sectionId].slice(-1)[0];
return {
sectionName: section.name,
section: report[sectionId],
total: total
};
} else if (sectionId === 'N/A') {
let total = report[sectionId].slice(-1)[0];
return {
sectionName: 'N/A',
section: report[sectionId],
total: total
}
}
/* end of section*/
}
});
console.timeEnd('sections');
r = removeUndefined(r);
return r;
});
}