I have a REST system that sends users using JSON but I can not display them correctly.
I'm using the plugin http://www.runningcoder.org/jquerytypeahead/documentation/
The code I have is shown at the bottom of the page.
The json reception does it correctly, I can debug the data and see how it is received. but I can not show that data.
The JSON data format is:
{
'exito': 'True',
'data':"[{"username": "juan", "id": 1, "avatar": "foto.png"},
{"username": "Pepe", "id": 3, "avatar": "foto.png"}]"
And my code is:
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
});