Micro template with nested arrays

Question

I am trying to incorporate a micro template into a plugin I am building. I have gotten everything good and all, but I am having issues when it comes to the nested array in the data. Thank you very much in advance for your help. Here is the stripped code:

var locations = [{
            "name": "Disneyland California",
            "address": "1313 North Harbor Boulevard"
        },
        {
            "name": "Walt Disney World Resort",
            "address": "1503 Live Oak Ln"
        }],

        tmplData = [{
                    location: locations[0],
                    foo: "bar"
                }],

        template = "Shipping From:<br><b>{{location.name}}, {{foo}}",
        attachTemplateToData;

        attachTemplateToData = function(template, data) {
            var i = 0,
                len = data.length,
                fragment = '';
            function replace(obj) {
                var t, key, reg;
                for (key in obj) {
                    reg = new RegExp('{{' + key + '}}', 'ig');
                    t = (t || template).replace(reg, obj[key]);
                }       
                return t;
            }
            for (; i < data.length; i++) {
                fragment += replace(data[i]);
            }   
            console.log(fragment);
        };  
        attachTemplateToData(template, tmplData);

Logs:

bar,{{location.name}}

As you can see in the console.log that 'foo' comes out just fine, but I also need to get the 'location.name' ("Disneyland California") to render as well. I know its going to be a nested loop, but I cannot for the life of me figure out the syntax. BTW, the templating solution came from here: http://net.tutsplus.com/tutorials/javascript-ajax/create-a-makeshift-javascript-templating-solution/ Thanks!

EDIT::: I am looking to make ANY property of the locations object able to be put into the template. So for instance if the user decided they want to add locations.city or locations.foo to the array, then in the template, they would just have to go {{location.city}} or {{location.foo}}. I HAVE been able to achieve this through the use of jQuery's tmpl plugin, but I don't need all of what that has to offer. I would like a VERY stripped version like I have, to only deal with the said instances. Here is what I did with the tmpl plugin (which works):

tmplData = [{
                    locations: settings.locations[i]
                }];

            var tmplMarkup = "Shipping From:<br><b>${locations.name}, ${locations.city}, ${locations.state}</b>";
            $.template("deTemplate", tmplMarkup);
            $.tmpl("deTemplate", tmplData).appendTo("#deResults");

Answer 1

What you need is to change template recognition to match not only {{prop}} in your matching code , but also {{prop.something}}

you can do this adding another if statement with new regexp.

Answer 2

instead of this:

    var locations = [{
        "name": "Disneyland California",
        "address": "1313 North Harbor Boulevard"
    },
    {
        "name": "Walt Disney World Resort",
        "address": "1503 Live Oak Ln"
    }],

    tmplData = [{
                location: locations[0],
                foo: "bar"
            }],

    template = "Shipping From:<br><b>{{location.name}}, {{foo}}",
    attachTemplateToData;

Try this:

    var locations = [{
        name: "Disneyland California",
        address: "1313 North Harbor Boulevard"
    },
    {
        name: "Walt Disney World Resort",
        address: "1503 Live Oak Ln"
    }],

    tmplData = [{
                location: locations[0].name,
                foo: "bar"
            }],

    template = "Shipping From:<br><b>{{location}}, {{foo}}",
    attachTemplateToData;

Really it is just the .name needs to be about 4 lines up! :)