Mustache Dynamically set variable

Question

I need help in using a javascript variable set dynamically as my mustache template variable. Here is the problem. My JSON looks like this

jsonData = {
"recipemodules" : {
    "enchiladas" : [
        {
            "title" : "Chicken Enchiladas",
            "thumbnailurl" : "http:www.google.com/image",
            "recipelink" : "location to recipe",
            "credit" : "some credit"
        },
        {
            "title" : "Chicken Enchiladas",
            "thumbnailurl" : "http:www.google.com/image",
            "recipelink" : "location to recipe",
            "credit" : "some credit"
        }
    ],
    "roastchicken" : [
        {
            "title" : "Chicken Enchiladas",
            "thumbnailurl" : "http:www.google.com/image",
            "recipelink" : "location to recipe",
            "credit" : "some credit"
        },
        {
            "title" : "Chicken Enchiladas",
            "thumbnailurl" : "http:www.google.com/image",
            "recipelink" : "location to recipe",
            "credit" : "some credit"
        }
    ],
    "salmon" : [
        {
            "title" : "salmon ",
            "thumbnailurl" : "http:www.google.com/image",
            "recipelink" : "location to recipe",
            "credit" : "some credit"
        },
        {
            "title" : "Chicken Enchiladas",
            "thumbnailurl" : "http:www.google.com/image",
            "recipelink" : "location to recipe",
            "credit" : "some credit"
        }

    ]
}

};

Then what i am doing next is... going to a webpage...grabing the URL and based on that URL, I set a variable.

var theCurrentURL = window.location.href;
var finalJSONobject = "";

switch(theCurrentURL) {
	case "www.google.com/something1":
		finalJSONobject = "enchiladas";
		break;
	case "www.google.com/something2":
		finalJSONobject = "roastchicken";
		break;
	case "www.google.com/something3":
		finalJSONobject = "salmon";
		break;
	default:
}

Finally... here is what my mushtache template looks like

// create template
template = '{{#enchiladas}}<div class="mri-container"><img src="{{thumbnailurl}}" /></div>{{/enchiladas}}';
 // parse template
 Mustache.parse(template);
 // render template
 rendered = Mustache.render(template, jsonData.recipemodules);
 			  
 // inject template to DOM
 carousel.html(rendered);

Now it runs fine when i use {{#enchiladas}}{{/enchiladas}} ... but this is not what i want. i want to be able to use a variable name instead of enchiladas.

if you look at my switch statement... it returns finalJSONobject as a string. i want my template to look like

template = '{{#finalJSONobject}}<div class="mri-container"><img src="{{thumbnailurl}}" /></div>{{/finalJSONobject}}';

But this does not work. The mustache template is using jsonData.recipemodules as its data. Therefore jsonData.recipemodules.enchiladas will work... but i want to dynamically set "enchiladas" which is set on my switch statement. I want to use my dynamically set variable in the template. i want to use jsonData.recipemodules.finalJSONobject so that based on the page... i look the data i want.

Please help me! thank you so much.

Konstantin

Answer 1

I think you are looking to the wrong direction here. You could just pass another variable to render instead of jsonData.recipemodules if you want your last template to work.
To illustrate that:

// jsonData definition before this
var theCurrentURL = window.location.href;
var templateData = {};

switch(theCurrentURL) {
    case "www.google.com/something1":
        templateData.finalJSONobject = jsonData.recipeModules["enchiladas"];
        break;
    case "www.google.com/something2":
        templateData.finalJSONobject = jsonData.recipeModules["roastchicken"];
        break;
    case "www.google.com/something3":
        templateData.finalJSONobject = jsonData.recipeModules["salmon"];
        break;
    default:
}
// create template
template = '{{#finalJSONobject}}<div class="mri-container"><img src="{{thumbnailurl}}" /></div>{{/finalJSONobject}}';
 // parse template
 Mustache.parse(template);
 // render template
 rendered = Mustache.render(template, templateData);

 // inject template to DOM
 carousel.html(rendered);