0

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!

Improve this question
7
  • 1
    Please show us the code you have that doesn't work, it will help us format an answer adapted to your needs. Also, libraries do you use for promises and for database queries ? Commented Aug 19, 2014 at 22:13
  • It's really, really hard to understand what you're asking here. Commented Aug 19, 2014 at 22:13
  • I will edit to show how I've done it WITHOUT a database connection. Perhaps that will explain what I'm trying to accomplish. Commented Aug 19, 2014 at 22:16
  • I think you're trying to be too broad. Try dividing the applications into problems that you know how to solve and problems that you don't know how to solve. Then take the time to focus on and understand the problems you don't know how to solve. For example, if promises are confusing you, you could try creating some simple programs with them on JSFiddle to solidify your understanding. Commented Aug 19, 2014 at 22:22
  • I'm down to the last problem. Getting those database results to output! I know what promises are. Just not sure on how to write it out since I feel it can be done multiple ways. Commented Aug 19, 2014 at 22:46

1 Answer 1

Reset to default
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);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This is a huge plus! This really puts things into perspective for me. My only question is when I query the business, I need to get back an ID. Within Parse, this is "objectId". However, I cannot get it to return back! I've tried business.get('objectId') and business.Id and business.objectId with no success. Any ideas on that?
Ok I answered my own question. Apparently if I just return business it gives me the proper correlation. But that makes me wonder if I ever truly needed the ID, what I'm suppose to do!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.