如何使用模板显示使用ajax获取的对象

Question

我有一个使用JSON发送用户的REST系统，但我无法正确显示它们。

我正在使用插件http://www.runningcoder.org/jquerytypeahead/documentation/

我的代码显示在页面底部。

json接收正确，我可以调试数据并查看它是如何接收的。但我无法显示数据。

JSON数据格式为：

{
'exito': 'True',
'data':"[{"username": "juan", "id": 1, "avatar": "foto.png"},
{"username": "Pepe", "id": 3, "avatar": "foto.png"}]"

我的代码是：

typeof $.typeahead === 'function' && $.typeahead({
    input: '.js-typeahead',
    minLength: 1,
    order: "asc",
    dynamic: true,
    delay: 500,
    backdrop: {
        "background-color": "#fff"
    },
    template: function (query, item) {
        var color = "#777";
        if (item.status === "owner") {
            color = "#ff1493";
        }
        return '<span class="row" style="padding:5px">' +
            '<span class="avatar" style="margin-left: 10px;margin-right: 10px;">' +
            '<img src="{{avatar}}">' +
            "</span>" +
            '<span class="username">{{username}} <small style="color: ' + color + ';display:block">({{status}})</small></span>' +
            '<span class="id">({{id}})</span>' +
            "</span>"
    },
 emptyTemplate: "No he encontrado nada {{query}}",
            source: {
                user: {
                    display: "username",
                    href: "https://www.github.com/{{username|slugify}}",
                    data: [{
                        "id": 415849,
                        "username": "an inserted user that is not inside the database",
                        "avatar": "https://avatars3.githubusercontent.com/u/415849",
                    }],
                    ajax: function (query) {
                       return {
                           type: "GET",
                           url: '/api/usuario/getUsuariosByName/'+$(".js-typeahead ").val(),
                           path: "data",
                           callback: {
                               done: function (data) {
                                   for (var i = 0; i < data.data.length; i++) {
                                           data.data[i].username = 'owner';
                                           data.data[i].status = 'contributor';
                                   }
                                   return data;
                               }
                           }
                       }
                   }
                },

            },
    callback: {
        onClick: function (node, a, item, event) {

            // You can do a simple window.location of the item.href
            alert(JSON.stringify(item));

        },
        onSendRequest: function (node, query) {
            console.log('request is sent')
        },
        onReceiveRequest: function (node, query) {
            console.log('request is received')
        },

    },
    debug: true
});