Cant get jquery templates to work

Question

I have this data:

[
{
    "id": "46",
    "title": "test",
    "description": "",
    "date_created": "2012-12-16 15:31:51",
    "date_expires": "2013-01-14 17:37:40",
    "date_renewal": "2012-12-15 17:37:40",
    "renewals": 0,
    "price": "333",
    "mrt": 0,
    "location_id": 0,
    "email": "",
    "password": "",
    "phone": "",
    "default_image": "",
    "property_type_id": 0,
    "share_basis_id": 0,
    "type": 0,
    "views": 0,
    "is_featured": 0,
    "is_recommended": 0,
    "has_furniture": 0,
    "has_wifi": 0,
    "has_airconditioner": 0,
    "has_bills_included": 0,
    "slug": "",
    "is_deleted": 0,
    "images": [],
    "guid": "50cddb576d3cf",
    "location_name": "Lim Chu Kang",
    "property_type_name": "HDB",
    "share_basis_name": "Shared room"
},
{
    "id": "45",
    "title": "ggghh",
    "description": "",
    "date_created": "2012-12-16 15:31:51",
    "date_expires": "2013-01-14 16:49:26",
    "date_renewal": "2012-12-15 16:49:26",
    "renewals": 0,
    "price": "0",
    "mrt": 0,
    "location_id": 0,
    "email": "",
    "password": "",
    "phone": "",
    "default_image": "",
    "property_type_id": 0,
    "share_basis_id": 0,
    "type": 0,
    "views": 0,
    "is_featured": 0,
    "is_recommended": 0,
    "has_furniture": 0,
    "has_wifi": 0,
    "has_airconditioner": 0,
    "has_bills_included": 0,
    "slug": "",
    "is_deleted": 0,
    "images": [],
    "guid": "50cddb576d474",
    "location_name": null,
    "property_type_name": null,
    "share_basis_name": null
},
{
    "id": "44",
    "title": "ggg",
    "description": "",
    "date_created": "2012-12-16 15:31:51",
    "date_expires": "2013-01-14 16:41:48",
    "date_renewal": "2012-12-15 16:41:48",
    "renewals": 0,
    "price": "56701",
    "mrt": 0,
    "location_id": 0,
    "email": "",
    "password": "",
    "phone": "",
    "default_image": "",
    "property_type_id": 0,
    "share_basis_id": 0,
    "type": 0,
    "views": 0,
    "is_featured": 0,
    "is_recommended": 0,
    "has_furniture": 0,
    "has_wifi": 0,
    "has_airconditioner": 0,
    "has_bills_included": 0,
    "slug": "",
    "is_deleted": 0,
    "images": [],
    "guid": "50cddb576d517",
    "location_name": "Jurong East",
    "property_type_name": null,
    "share_basis_name": null
}

]

and I have this template:

 <script id="tmp" type="text/x-jquery-tmpl">
        <b>${title}</b>
        <b>${id}</b>
        <br />
</script>

and my jquery code is this:

$.post('map/search-submit/', {
                        data: $('#map_form').serialize()
                    },
                        function(data)
                        {
                            console.log(data);

                            $( "#tmp" ).tmpl( data ).appendTo( "#results" );
                        }
            );

where data is the json data I wrote above.

All I get is empty html tags without the data in it.

<div id="results">
     <b></b><b></b><br />
</div>

What am I doing wrong?

Answer 1

I found what the issue was:

The data returned was treated as string ( I was sending it with PHP's json_encode($data); )

So basically what I needed to do was: parse the string as JSON on the client

$.post('map/search-submit/', {
                    data: $('#map_form').serialize()
                },
                    function(data)
                    {
                        console.log(data);
                        var data = $.parseJSON(response);
                        $( "#tmp" ).tmpl( data ).appendTo( "#results" );
                    }
        );