json with jquery template

I have this multidimensional json that is supposed to generate an html table. But as of right now, the only things that are getting written, is the tr's, no td's.

I know there is already a similar question title, but usage is quite different.

The di开发者_Go百科fference from what I can tell is that I am writing my templates using the template method instead of declaring each one as its own script...

This is the parsed(JSON) array

[
    [
        {
        "name": "Morning meeting.",
        "description": "The morning business meeting hosted at Apple.",
        "image": "302632084.png",
        "rating": "1.5",
        "category": "4"
        },
        {
        "name": "Winning",
        "description": "",
        "image": "321752348.png",
        "rating": "5.0",
        "category": "3"
        },
        {
        "name": "1234566890abcdefghijklmnopqrstuvwxyz",
        "description": "",
        "image": "316892896.png",
        "rating": "3.0",
        "category": "16"
        }
    ],
    [
        {
        "name": "Kristian Lunch",
        "description": "Having a lunch break.",
        "image": "320196094.png",
        "rating": "3.0",
        "category": "8"
        },
        {
        "name": "Dropping the kids off at the pool.",
        "description": "A daly lesson on taking the kids to the pool.",
        "image": "302658031.png",
        "rating": "5.0",
        "category": "4"
        },
        {
        "name": "Dropping the kids off at the pool.",
        "description": "A daly lesson on taking the kids to the pool.",
        "image": "302658031.png",
        "rating": "5.0",
        "category": "4"
        }
    ]
]

This is my method that's supposed to write the data

EventsView.prototype.writeGrid = function(events)
{
    var gridRows = "<td class='gridRow'>${name}</td>";    
    $.template("gridRows", gridRows);
    var markup = "<tr class='gridCol'>{{events, gridRows}}</tr>";
    $.template( "gridCols", markup );
    $.tmpl( "gridCols", events )
        .appendTo("#gridBody");
}

As of right now, this is the html that is generated

<tbody id="gridBody">
    <tr class="gridCol">
    </tr>
    <tr class="gridCol">
    </tr>
</tbody>

This is the HTML I want...

<tbody id="gridBody">
    <tr class="gridCol">
        <td class="gridRow">Morning meeting.</td>
        <td class="gridRow">Winning</td>
        <td class="gridRow">1234566890abcdefghijklmnopqrstuvwxyz</td>
    </tr>
    <tr class="gridCol">
        <td class="gridRow">Kristian Lunch</td>
        <td class="gridRow">Dropping the kids off at the pool.</td>
        <td class="gridRow">Dropping the kids off at the pool.</td>
    </tr>
</tbody>

---

JSON is your friend and much neater than a multidimensional array...

http://www.json.org/js.html

https://github.com/douglascrockford/JSON-js