PDA

View Full Version : Nested json fields and templates (tpl)



jeffj
13 Oct 2010, 3:00 PM
I am accessing a google data json object that has multiple nested fields in a data hierarchy. I want to access multiple levels of sub elements withen the Ext.Component temple. How can I access data element that are nested deeper in the json object with tpl?

a sample json reqest:
http://maps.google.com/maps/feeds/features/110714523030907152027/0004910ab55c9b338860d/snippet?lat=30.377614&lng=-97.892303&radius=10000&mq=[BusinessIcon:beachflag.png]&alt=json

In the callback I set the json object "var entry = data.feed.entry" to update Ext.Component as entry[i] are the discrete element for my list. The problem is the element I want are a birds nest within these elements.

I this json element I want to access element such as.

data.feed.entry.gd$customProperty[1].$t the value of which is: "131 Sailfish St, Austin".

How can I access these element using the tpl structure?



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var timeline = new Ext.Component({
title: 'Timeline',
cls: 'timeline',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="tweet-content">',
'<h2>{updated}</h2>',
'<p>{text}</p>',
'</div>',
'</div>',
'</tpl>'
]
});


var refresh = function(position) {
var coords = position || map.geo.coords;
if (coords) {
map.update(coords);

Ext.util.JSONP.request({
url: 'http://maps.google.com/maps/feeds/features/110714523030907152027/0004910ab55c9b338860d/snippet',
callbackKey: 'callback',
params: {
lat: '30.377614',
lng: '-97.892303',
radius: '10000',
alt: 'json'

},
callback: function(data) {

var entry = data.feed.entry;

timeline.update(entry);

}
});
}
};

evant
13 Oct 2010, 3:08 PM
var o = {
foo: {
bar: {
baz: [{
val: 1
}]
}
}
};

console.log(new Ext.XTemplate('{[values.foo.bar.baz[0].val]}').apply(o));

jeffj
13 Oct 2010, 3:37 PM
ok I kinda see the logic with the xTemplate but I am unsure how to express this to solve my problem.

1. Where do I define the ExtTemplate object. I assume in the callback where I can get to the data object from my Ext.util.JSONP.request (called "data" in this case).


callback: function(data) {

var entry = data.feed.entry;

timeline.update(entry);

}

2. Once I have the Xtemplate object how do I pass it to Ext.Component and declare it in the HTML?

tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="tweet-content">',
'<h2>{updated}</h2>',
'<p>{text}</p>',
'</div>',
'</div>',
'</tpl>'
]

evant
13 Oct 2010, 3:47 PM
You can declare it wherever you want, I assume the structure of the data is always the same.

2) Call the update method, as you were doing before.

In short, the code you have above looks "correct".

jeffj
13 Oct 2010, 5:05 PM
I am unclear as to how console.log(new Ext.XTemplate() will add the value to my json object. I feel like I'm missing something very minor.



callback: function(data){

var entry = data.feed.entry

console.log(new Ext.XTemplate('{[entry[0].category.scheme]}').apply(entry));

timeline.update(entry);

}

evant
13 Oct 2010, 5:06 PM
There's no need for that, it was just there to demonstrate that it works. You need to create the template with the component, then call update with the data.

jeffj
13 Oct 2010, 5:11 PM
So I need to take the large and complex "data" from the json callback (thanks google) and construct a less complicated XTemplate to call update with. Am I following?

evant
13 Oct 2010, 5:13 PM
No, you aren't:



var o = {
foo: {
bar: {
baz: [{
val: 1
}]
}
}
};

var tpl = new Ext.XTemplate('{[values.foo.bar.baz[0].val]}');

Ext.setup({
onReady: function(){
var p = new Ext.Panel({
fullscreen: true,
tpl: tpl
});

setTimeout(function(){
// simulate ajax call
p.update(o);
}, 2000);
}
});

jeffj
13 Oct 2010, 6:46 PM
Found a solution:

You can specify the object to pull data from with the tpl tag so. in this case "gd$customProperty[0]" in the json object.




var timeline = new Ext.Component({
title: 'Timeline',
cls: 'timeline',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="tweet-content">',
'<h2>{stuff}</h2>',
'<p>{data}</p>',
'<tpl for="gd$customProperty[0]">',
'<p>{name}</p>',
'<p>{$t}</p>',
'</tpl>',
'</div>',
'</div>',
'</tpl>'

]
});


But I still can not call the component with the name {$t}. Feels like templates are not letting me call component with "$" characters.