Parse: JavaScript Promises issue

Question

I am trying to wrap my head around Promises, then , when , and everything else that goes along with it. I am not having much success. Here is what I'm trying to accomplish in English, and maybe somebody can crack the code because so far nothing I've written works.

I am writing a SPA (single page app) for mobile devices. Essentially all the content is is one giant HTML page with a bunch of DIV's. However, only one DIV is shown at a time. The user will have a tab bar to click on each of the icons to show/hide DIV's. Think of something like the Apple App Store interface with "Featured", "Top Charts", "Explore", "Search", and "Updates" at the bottom.

1. Parse database query of table Businesses for 1 business with AppUrl=example.com
2. Resulting business objectId is used to query table Navigation for all pieces of the navigation. Things like "Home", "About Us", "Menus", "Events", "Contact", etc.
3. Resulting navigation items are looped to render DIV's with content in them. The content comes from the tables below depending on the Module column:
   • "Home" = Photos table
   • "About Us" = Pages table
   • "Menus" = Lists table
   • "Event" = Lists table

That's basically it. Pretty simple, but obviously there are nest queries within #4. I don't know if I should be creating one giant object in my queries and then outputting that? Or creating a bunch of different objects with arrays inside of them? Really kind of lost since this style of syntax is different than say PHP. Advice?

Here is my non-database connected version:

app.get('/', function(req, res){

var frontpageImages = [
        { caption:"Eggplant, Prosciutto, and Pesto Pressed Sandwiches.", file:"image01.jpg", position:"15%" },
        { caption:"Pico de Gallo", file:"image02.jpg", position:"75%" },
        { caption:"B.L.A.T Croque Madame", file:"image03.jpg", position:"20%" },
        { caption:"Double Oreo Brownie Cupcake", file:"image04.jpg", position:"80%" },
        { caption:"Baked Chicken Chimichangas with Monterey Jack Cheese Sauce", file:"image05.jpg", position:"20%" }
        ]

var menu = [
        { divider:"Appetizers" },
        { name:"French Fries", picture:"menu-french-fries", subname:"$4.95" },
        { name:"Loaded Cheese Fries", picture:"menu-cheese-fries", subname:"$7.95" },
        { name:"Gaelic Chips", picture:"menu-gaelic-chips", subname:"$2.95" },
        { name:"Jalapeno Mac n' Cheese", picture:"menu-jalapeno-mac-n-cheese", subname:"$4.95" },
        { name:"Chicken Wings", picture:"menu-chicken-wings", subname:"$8.50" },
        { name:"Irish Nachos", picture:"menu-irish-nachos", subname:"$8.50" },
        { name:"Black & Tan Onion Rings", picture:"menu-onion-rings", subname:"$6.95" },
        { name:"Mac's Quesadillas", picture:"menu-quesadillas", subname:"$8.50" },
        { name:"Banger Bites", picture:"menu-banger-bites", subname:"$7.95" },
        { divider:"Salads" },
        { name:"Caesar Salad", picture:"menu-caesar-salad", subname:"$6.50" },
        { name:"House Salad", picture:"menu-house-salad", subname:"$6.50" },
        { name:"Buffalo Chicken Salad (Grilled or Battered)", picture:"menu-buffalo-chicken-salad", subname:"$8.95" },
        { divider:"Sandwiches & Burgers" },
        { name:"Rueben", picture:"menu-reuben", subname:"$8.50" },
        { name:"Dublin Corned Beef", picture:"menu-corned-beef-sandwich", subname:"$8.50" },
        { name:"Philly Cheese Steak", picture:"menu-philly-cheese-steak", subname:"$8.50" },
        { name:"Grilled Chicken", picture:"menu-grilled-chicken-sandwich", subname:"$8.50" },
        { name:"Club Sandwich", picture:"menu-club-sandwich", subname:"$8.50" },
        { name:"Not-So-Irish Burger", picture:"menu-irish-burger", subname:"$9.95" },
        { name:"Dirty Burger", picture:"menu-dirty-burger", subname:"$7.95" },
        { name:"Aurora Burger", picture:"menu-aurora-burger", subname:"$10.95" },
        { name:"Bleu Cheese Burger", picture:"menu-bleu-cheese-burger", subname:"$11.95" },
        { name:"Additional Burger Toppings", picture:"menu-burger-toppings", subname:"$0.50" },
        { divider:"Irish Favorites & Entrees" },
        { name:"Beer Battered Fish N' Chips", picture:"menu-fish-and-chips", subname:"$11.50" },
        { name:"Bangers And Mash", picture:"menu-bangers-and-mash", subname:"$10.95" },
        { name:"Shepherd's Pie", picture:"menu-shepherds-pie", subname:"$10.95" },
        { divider:"Brunch" },
        { name:"Irish Breakfast", picture:"menu-irish-breakfast", subname:"$11.50" },
        { name:"American Breakfast", picture:"menu-american-breakfast", subname:"$11.50" },
        { name:"Irish Breakfast Roll", picture:"menu-irish-breakfast-roll", subname:"$8.95" },
        { name:"English Muffin, Scrambled Eggs, Cheddar and Irish Rasher", picture:"menu-irish-rasher", subname:"$7.50" },
        { name:"3 Egg Omelette", picture:"menu-omelette", subname:"$6.50" },
        { name:"Eggs Benedict", picture:"menu-eggs-benedict", subname:"$8.50" },
        { name:"3 Pancakes with Maple Syrup", picture:"menu-pancakes", subname:"$6.00" },
        { name:"Grilled Turkey and Swiss", picture:"menu-grilled-turkey-and-swiss", subname:"$7.00" }
        ];

var drinks = [
        { name: "Bahama Bomb", desc: "Bacardi 151 Rum, Cruzan Coconut Rum, Creme de Banana, Pineapple juice, and Sprite.", subname: "$9.95" },
        { name: "Tropical Margarita", desc: "Grand Marnier, Cruzan Coconut Rum, Blue Curacao, sour mix, and orange juice. Garnished with lemon, lime, and cherry.", subname: "$10.95" },
        { name: "LOL[emonade]", desc: "Absolute Citron, Triple Sec, muddled lemon and simple syrup, sour mix, and Sprite.", subname: "$9.95" }
        ];

var events = [
        { divider:"Upcoming Events" },
        { name: "Super Bowl Party", subname: "1/28" },
        { name: "Valentine's Singles Party", subname: "2/14" },
        { divider:"Weekly Events" },
        { name: "Hospitality Night", subname: "Monday" },
        { name: "Trivia Night", subname: "Tuesday" },
        { name: "Karaoke with Liam", subname: "Thursday" }
        ];

res.render('index', {
    nav:[
        { name:"Home", title:"Clark's Bar and Grille", url:"home", icon:"home", module:"home", run:"startSlider", source:frontpageImages },
        { name:"Menu", url:"menu", icon:"cutlery", module:"list", source:menu },
        { name:"Drinks", url:"drinks", icon:"glass", module:"list", source:drinks },
        { name:"Events", url:"events", icon:"calendar", module:"list", source:events },
        { name:"Restaurant Info", title:"Restaurant Info", url:"business-info", icon:"info-circle", module:"business-info" },
        { name:"Instagram Feed", title:"Instagram", url:"instagram", icon:"instagram", module:"instagram", run:"startInstagram" },
        { name:"Like and Follow Us", title:"Social Media", url:"social-media", icon:"thumbs-up", module:"social-media-links" },
        { name:"Contact Clark's", title:"Contact Clark's", url:"contact", icon:"envelope", module:"contact" }
        ]
});

});

When the page renders now, I have the index.ejs loop the nav object and display each DIV (Home, Menu, Drinks, Events, etc). Each array within the nav object has a key called source which returns the objects for them listed above. The page renders perfectly, it's just not connected to a database. I would like to swap all that out with a DB connected version!

Answer 1

I hope this code will help you, that's the best I can suggest with what you provided:

function handleError(message, error) {
    //Handle any error here, for example:
    console.error(message, error);
    res.send(500, message);
}

var responseContent = {
    nav: [],
};

getBusiness(); //start fetching data

function getBusiness() {
    var businessQuery = /*query to get element AppUrl=example.com*/;
    businessQuery.first().then(
        getNavigation,
        handleError.bind(null, 'error getting business'));
}

function getNavigations(business) {
    var navigationsQuery = /*query to get navigation elements*/;
    var promises = [];
    navigationsQuery.each(function (navigation) {
        promises.push(processNavigation(navigation));
    }).then(
        function () {
            Parse.Promise.when(promises).then(
                renderResult,
                handleError.bind(null, 'error processing navigations'));
        },
        handleError.bind(null, 'error iterating navigations'));
}

function processNavigation(navigation) {
    var promise = Parse.Promise();
    var nav = {
        name: /*name*/,
        url: /*url*/,
    };
    responseContent.nav.push(nav);
    switch (/*module*/) {
        case 'Home':
            getPhotosContent(/*args*/).then(
                function (source) {
                    nav.source = source;
                    promise.resolve();
                },
                function (error) {
                    promise.reject(error);
                }
            );
            break;
        //can do similar code for 'About Us', 'Menus', ...
        default:
            promise.resolve();
    }
    return promise;
}

function getPhotosContent(/*args*/) {
    var promise = Parse.Promise();
    var results = [];
    var photosQuery = /*query to get photos*/;
    photosQuery.each(function (photo) {
        results.push(photo);
    }).then(
        function () {
            promise.resolve(results);
        }, function (error) {
            promise.reject(error);
        }
    );
    return promise;
}

function renderResult() {
    res.render('index', responseContent);
}