PDA

View Full Version : How to get JSON data and display it in a tpl



ptamzz
23 Jun 2011, 6:05 AM
I'm trying to retrieve JSON data and display it in a tpl.



timeline = new Ext.Component({
title: 'Timeline',
cls: 'timeline',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<div class="details">',
'<h2>{name}</h2>',
'<p>{desc}</p>',
'</div>',
'</tpl>'
]});

Ext.Ajax.request({
url: '/sandbox/sencha/test/proc/getEvents.php',
method: 'post',
params: {
my_param: 'my_value'
},
success: function(response) {
var eventList = response.results;
timeline.update(eventList); // Update the events
}
})


getEvents.php returns a JSON string

{
"sample":[
{
"id":"1",
"name":"131\/E Address",
"desc":"This is where I live!!",
"lat":"0",
"lon":"0",
"starttime":"0",
"endtime":"0",
"flag":"0"
},
{
"id":"2",
"name":"INOX",
"desc":"Central Mall",
"lat":"0",
"lon":"0",
"starttime":"0",
"endtime":"0",
"flag":"0"
}
]
}

Can anyone help on this. Am I making the right Ajax Request?? All I get is a blank screen at the moment.

themightychris
23 Jun 2011, 6:23 AM
Set a breakpoint on the first line of your success function and see what's up with the variables you're using

You need something like:

var eventList = Ext.decode(response.responseText);
timeline.update(eventList);

ptamzz
23 Jun 2011, 6:31 AM
Set a breakpoint on the first line of your success function and see what's up with the variables you're using

You need something like:

var eventList = Ext.decode(response.responseText);
timeline.update(eventList);

I tried doing that.

When I use



var eventList = Ext.decode(response.responseText);
alert(eventlist);
timeline.update(eventList);


The alert says
[object] [object]

Now When I use


var eventList = response.responseText;
timeline.update(eventList);

The whole JSON string is directly printed on my page. It seems the tpl is not being taken into account.

digil
23 Jun 2011, 7:27 AM
I suggest doing console.log(eventlist) and console.log(response) because (at least in Chrome debugger, I'm sure Firebug does as well) you can actually look inside the object rather than seeing the infamous [Object] [Object].

Secondly, I see you've got your tpl in an array, I'm not familiar with that use.

try


tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="details">',
'<h2>{name}</h2>',
'<p>{desc}</p>',
'</div>',
'</tpl>'
),

ptamzz
23 Jun 2011, 8:24 AM
I dont have much knowledge on how to use the console but I tried console.log(response) and I got this in the console


Object
getAllResponseHeaders: function (){return b}
getResponseHeader: function (j){return b[j.toLowerCase()]}
request: Object
requestId: 1
responseText: "{"results":[{"id":"1","name":"131\/E Bangalore","desc":"This is where I live!!","lat":"0","lon":"0","starttime":"0","endtime":"0","flag":"0"},{"id":"2","name":"INOX","desc":"Central Mall, JP Nagar","lat":"0","lon":"0","starttime":"0","endtime":"0","flag":"0"}]}"
responseXML: null
status: 200
statusText: "OK"
__proto__: Object

console.log(eventList) gives


results: Array[2]
0: Object
desc: "This is where I live!!"
endtime: "0"
flag: "0"
id: "1"
lat: "0"
lon: "0"
name: "131/E Bangalore"
starttime: "0"
__proto__: Object
1: Object
length: 2
__proto__: Array[0]
__proto__: Object
__defineGetter__: function __defineGetter__() { [native code] }
__defineSetter__: function __defineSetter__() { [native code] }
__lookupGetter__: function __lookupGetter__() { [native code] }
__lookupSetter__: function __lookupSetter__() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }


By the look of it, everything seems to be fine with it.

rockinthesixstring
23 Jun 2011, 12:46 PM
did you take your template out of the array?

ptamzz
23 Jun 2011, 12:47 PM
Yes, I tried what @digil above has provided!! still doesn't work. :(

steffenk
24 Jun 2011, 2:22 AM
better to use a store - this is all built in.

ptamzz
24 Jun 2011, 2:30 AM
I changed it to use store and proxy and it seems to work fine now. Thanks everyone.

Now, I want to put the `listEvent` inside another Panel `chat.views.homecard` (codes below) . Can anyone help me on that?



ListEvent = new Ext.Application({
name: "ListEvent",

launch: function() {
ListEvent.listPanel = new Ext.List({
id: 'indexlist',
store: ListEvent.ListStore,
itemTpl: '<div class="contact">{name}</div>'
});

ListEvent.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'fit',
items: [ListEvent.listPanel]
});
}
});



chat.views.homecard = Ext.extend(Ext.Panel, {
title : "Home",
iconCls: "home"
});

Ext.reg('homecard', LoChat.views.homecard);