Question

Say I have a json object with nested arrays to unknown depths. I want to feed each array into a _.template function. For Example, my json object might look like:

$start_elements = array (
        array(
            "elementTag"=>"li",
            "elementClass"=>"dashboard",
            "elementContent"=>array(
                "elementTag"=>"a",
                "elementContent"=>"Dashboard",
                "href"=>"#home"
                ) 
        ),
        array(
            "elementTag"=>"li", 
            "elementClass"=>"count indicator", 
            "elementContent"=>array(
                array(
                    "elementTag"=>"span", 
                    "elementClass"=>"data-count='8'", 
                    "elementContent"=>"Notifications"
                ), 
                array(
                    "elementTag"=>"ul", 
                    "elementClass"=>" ",
                    "elementContent"=>array(
                        "elementTag"=>"li", 
                        "elementContent"=>array(
                            "elementTag"=>"a",
                            "href"=>"#", 
                            "elementExtra"=>"data-modal",
                            "elementContent"=>array(
                                array(
                                    "elementTag"=>"h4",
                                    "elementContent"=>"Lorem Ipsum"
                                    ), 
                                array(
                                    "elementTag"=>"<p>",
                                    "elementContent"=>"Lorem ipsum dolor sit imet smd ddm lksdm lkdsm"
                                )
                            )
                        )
                    )
                )
            )
        )
);
json_encode($start_elements);

_.template:

_.template('<<%= elementTag %> class="<%= elementClass %>" href="<%= href %>"><%= elementContent %></<%= elementTag %>')

The nested structure of the arrays is significant because I want to output the html in the same nested structure. For example, the above object would output an li object with an anchor tag inside of it. How do I go about applying the template to each nested array, while preserving this structure?

Answer 1

I’d make a wrapper function around your template to keep your template logicless. Then you can use underscore’s utility methods to check if you have an array, object (or string) (_.isArray and _.isObject) in your hands.

You’ll need to pass in your wrapper function into the template so you can use it. You can just _.extend your data with {tmpl: tmpl}.

Here’s a working, though simplified, example:

    var data = {
    elementTag: "li",
    elementContent: [{
        elementTag: "a",
        elementContent: "Dashboard"
    }, {
        elementTag: "div",
        elementContent: "Hello"
    }]
};

var tmpl = _.template('<<%= elementTag %>><%= template(elementContent) %></<%= elementTag %>>');

function template(elData) {
    var html = "";
    if (_.isArray(elData)) {
        _.each(elData, function (el) {
            html += template(el);
        });
    } else if (_.isObject(elData)) {
        html = tmpl(_.extend({
            template: template
        }, elData));
    } else {
        html = elData;
    }
    return html;
}

console.log(template(data));