Angular nested loop promises - angularjs

Question

I'm trying to build a Cordova/angular app with a SQLite plugin to make it work offline but I'm having a lot of trouble with the promise and asynchronous of the query to the database this is my situation:
I have 5 table configured like this:
Table Pages with id, title, template_id and body
Table Menu with id and tag
Table PageMenus with id and page_id and menu_id to associate page and menu
Table MeniItems with id menu_id and body with the "actual" element in teach menu
Table template with id and tag to select the right view
for compatibility reason (I'm using the same code for the webapp and the mobile app and for the webapp I call my API while on mobile I download all the content on the device) I need to retrive the pages in this format:
{
"id": 1
"body": "Welcome to the homepage",
"title": "Homepage",
"template_tag": "tab",
"menus": [
{
"id": 3,
"tag": "home_menu",
"menu_items": [
{
"menu_id": 3,
"body": "Movie"
},
{
"menu_id": 3,
"body": "Restaurant"
},
{
"menu_id": 3,
"body": "Messages"
},
{
"menu_id": 3,
"body": "Systems"
}
]
},
{
"id": 62,
"tag": "user_menu",
"menu_items": [
{
"menu_id": 62,
"body": "About"
},
{
"menu_id": 62,
"body": "Updates"
},
{
"menu_id": 62,
"body": "Help"
},
{
"menu_id": 62,
"body": "Reset Password"
},
{
"menu_id": 62,
"body": "Report/ Feedback"
}
]
}
]
}
I'm already able to get the right format but my problem is that the controller tries to access the body of the menu before is resolved so I get error undefined this is the code I'm using in my factory at themoment:
return {
getHomePage: function() {
// other function
},
getPage: function(id) {
var results = $q.defer();
function request() {
var res = {};
var queryPage = "SELECT pages.id, pages.body, pages.title, templates.tag AS template_tag FROM pages JOIN templates ON pages.template_id = templates.id WHERE pages.id = ?";
$cordovaSQLite.execute(db, queryPage, [id]).then(function(page) {
res = page.rows.item(0);
res.menus = [];
var queryMenus = "SELECT menus.id, menus.tag FROM menus JOIN page_menus ON menus.id = page_menus.menu_id WHERE page_menus.page_id = ?";
$cordovaSQLite.execute(db, queryMenus, [res.id]).then(function(menus) {
for (var i = 0; i < menus.rows.length; i++) {
var menu = {
id: menus.rows.item(i).id,
tag: menus.rows.item(i).tag,
menu_items: []
};
var queryMenuItems = "SELECT * FROM menu_items JOIN menus ON menu_items.menu_id = menus.id where menus.id = ?"
$cordovaSQLite.execute(db, queryMenuItems, [menus.rows.item(i).id]).then(function(menu_items) {
for (var i = 0; i < menu_items.rows.length; i++) {
menu.menu_items.push(menu_items.rows.item(i));
}
});
res.menus.push(menu);
};
results.resolve(res);
});
});
};
request();
return results.promise;
},
getMedia: function(id) {
// other function
}
};

Answer 1

It's a good practice to chain promises the way:
getSomething: function(...) {
return requestReturningPromise1.then(function(resultOfPromise1) {
// Do something here (prepare next request,...)
return requestReturningPromise2;
}).then(function(resultOfPromise2) {
// Do something here (prepare next request,...)
return requestReturningPromise3;
}).then(function(resultOfPromise3) {
// Do something here (prepare next request,...)
return finalReturn;
});
}
Nesting is reduced, it's more readable and easy to debug.
So applying it to your code gives something like this:
getPage: function(id) {
var res = {};
var queryPage = "SELECT pages.id, pages.body, pages.title, templates.tag AS template_tag FROM pages JOIN templates ON pages.template_id = templates.id WHERE pages.id = ?";
return $cordovaSQLite.execute(db, queryPage, [id]).then(function(page) {
res = page.rows.item(0);
res.menus = [];
var queryMenus = "SELECT menus.id, menus.tag FROM menus JOIN page_menus ON menus.id = page_menus.menu_id WHERE page_menus.page_id = ?";
return $cordovaSQLite.execute(db, queryMenus, [res.id]);
}).then(function(menus) {
var menuPromises = [];
for (var i = 0; i < menus.rows.length; i++) {
var menu = {
id: menus.rows.item(i).id,
tag: menus.rows.item(i).tag,
menu_items: []
};
var queryMenuItems = "SELECT * FROM menu_items JOIN menus ON menu_items.menu_id = menus.id where menus.id = ?";
var menuPromise = $cordovaSQLite.execute(db, queryMenuItems, [menus.rows.item(i).id]).then(function(menu_items) {
for (var i = 0; i < menu_items.rows.length; i++) {
menu.menu_items.push(menu_items.rows.item(i));
}
return menu;
});
menuPromises.push(menuPromise);
}
return Promise.all(menuPromises);
}).then(function(menus) {
for (var i = 0; i < menus.length; i++) {
res.menus.push(menus[i]);
}
return res;
});
}
Note that in the code above, the service itself returns a promise so you have to consume it like this in your controller:
MyService.getPage(id).then(function(page) {
// here, bind the result page to your controller scope ...
});

Answer 2

This is what I end up doing (I post it even if I don't think will be really helpful for someone else because is heavily based on the structure of my DB):
var promisePage = $cordovaSQLite.execute(db, "SELECT p.*, t.tag AS template_tag FROM pages AS p JOIN templates AS t ON p.template_id = t.id WHERE p.id = ?", [id]);
var promiseMenus = $cordovaSQLite.execute(db, "SELECT m.* FROM menus AS m JOIN page_menus AS pm ON m.id = pm.menu_id WHERE pm.page_id = ?", [id]);
var promiseMenuItems = $cordovaSQLite.execute(db, "SELECT mi.* FROM menu_items AS mi JOIN menus AS m ON mi.menu_id = m.id JOIN page_menus AS pm ON pm.menu_id = m.id WHERE pm.page_id = ?", [id]);
return $q.all([promisePage, promiseMenus, promiseMenuItems]).then(function(data) {
var page = data[0].rows.item(0);
var menus = data[1];
var menuItems = data[2];
// here there is some boring code to construct the page
return page;
Simply instead of querying the db for menu and menu items after I got the page I query all three element in parallel and then do all the work in a $q.all.