PDA

View Full Version : Ext.List & JSON => "Unexpected token : "



zwelch
26 May 2011, 3:10 AM
Hi, I hope it can help someone.

I am making a list and would like to the content with JSON.


this.list = new Ext.List({
grouped: true,
indexBar: true,
itemTpl: '<span class="name">{name_fist} {name_last}</span>',
store: new Ext.data.Store({
model: 'team',
getGroupString: function(r){
return r.get('name_first');
},
proxy: {
type: 'scripttag',
url : 'http://www.domain.de/m/json',
reader: {
type: 'json',
root: 'result'
}
},
listeners: {
load: { fn: this.initializeData, scope: this }
}
}),
listeners: {
selectionchange: {fn: this.onSelect, scope: this}
}
});


this.list.on('render', function(){
this.list.store.load();
}, this);


Ext.regModel('team', {
fields: ['name_last','name_first','name_url','number']
});


the JSON-respone

{"result":[{"name_last":"foo","name_first":"Ivonne","name_url":"ivonne_schroeder","number":"13"},{"name_last":"Greb","name_first":"Ronny","name_url":"ronny_greb","number":"31"},{"name_last":"Wolfermann","name_first":"Robert","name_url":"robert_wolfermann","number":"53"},{"name_last":"Neumann","name_first":"Chris","name_url":"chris_neumann","number":"4"},{"name_last":"Greulich","name_first":"Sebastian","name_url":"sebastian_greulich","number":"5"},{"name_last":"Becher","name_first":"Sven","name_url":"sven_becher","number":"15"},{"name_last":"Mazurek","name_first":"Filip","name_url":"filip_mazurek","number":"17"},{"name_last":"foo","name_first":"Philipp","name_url":"philipp_raedecker","number":"22"},{"name_last":"Wimmer","name_first":"Daniel","name_url":"daniel_wimmer","number":"87"},{"name_last":"Michalk","name_first":"foo","name_url":"rene_michalk","number":"8"},{"name_last":"Jandik","name_first":"Richard","name_url":"richard_jandik","number":"11"},{"name_last":"Wahne","name_first":"Daniel","name_url":"daniel_wahne","number":"23"},{"name_last":"Landgraf","name_first":"Rene","name_url":"rene_landgraf","number":"28"},{"name_last":"Jankovych","name_first":"Vitezslav","name_url":"vitezslav_jankovych","number":"29"},{"name_last":"Musil","name_first":"Mojmir","name_url":"mojmir_musil","number":"41"},{"name_last":"Brill","name_first":"Andreas","name_url":"andreas_brill","number":"52"},{"name_last":"Leyva","name_first":"Marcel","name_url":"marcel_leyva","number":"80"},{"name_last":"Noack","name_first":"Marco","name_url":"marco_noack","number":"86"},{"name_last":"Kuhlee","name_first":"Stephan","name_url":"stephan_kuhlee","number":"88"},{"name_last":"Neumann","name_first":"Eric","name_url":"eric_neumann","number":"93"},{"name_last":"Schwabe","name_first":"Jens","name_url":"jens_schwabe","number":"38"},{"name_last":"Jandik","name_first":"Gerd","name_url":"gerd_jandik","number":"foo"},{"name_last":"Kasper","name_first":"Detlef","name_url":"detlef_kasper","number":"foo"}]}

In der Fehler-Konsole wird mir folgenden Meldung angezeigt:

json:-1Resource interpreted as Script but transferred with MIME type application/json.
json:1Uncaught SyntaxError: Unexpected token :

I try already gone for several hours but came to no solution. If I write the data manually in the script everything works but when I load the data using JSON does not work.

zwelch

Jack9
26 May 2011, 11:22 AM
Take the json you pasted and run it through http://jsbeautifier.org/
Make sure your service is returning this static javascript. It may tell you a specific line that's causing the problem.
Second, remove the {"result":[..]}, just return [..] it is probably the issue.

zwelch
15 Jun 2011, 7:28 AM
OK, a new trial. :)

I have tried to follow your instructions, unfortunately without success. Here is mynew attempt.

JS:

Ext.regModel('team', {
fields: [
{name: 'name_last', type: 'string'},
{name: 'name_first', type: 'string'},
{name: 'name_url', type: 'string'},
{name: 'number', type: 'string'}
]
});


Ext.setup({
onReady: function(){


new Ext.Panel({
fullscreen:true,
style: "background-color: #fee;",
items: [],
dockedItems: [
{
dock: "top",
html: "a docked item",
style: "background-color: #fcc;"
},
//---
{
dock: "top",
items: [{
height: 480,
xtype: 'list',
store: new Ext.data.Store({
model: 'team',
proxy: {
type: 'ajax',
url : 'http://www.tornado-niesky.de/m/json_team.php',
reader: {
type: 'json'
}
}
}),
itemTpl: '<div class="contact"><strong>{name_first}</strong> {name_last}</div>',
grouped: true,
indexBar: true
}]
}
//---
]
});
}
});
JSON:

[[{ "name_last": "foo", "name_first": "Ivonne", "name_url": "ivonne_schroeder", "number": "13" }, { "name_last": "Greb", "name_first": "Ronny", "name_url": "ronny_greb", "number": "31" }, { "name_last": "Wolfermann", "name_first": "Robert", "name_url": "robert_wolfermann", "number": "53" }, { "name_last": "Neumann", "name_first": "Chris", "name_url": "chris_neumann", "number": "4" }, { "name_last": "Greulich", "name_first": "Sebastian", "name_url": "sebastian_greulich", "number": "5" }, { "name_last": "Becher", "name_first": "Sven", "name_url": "sven_becher", "number": "15" }, { "name_last": "Mazurek", "name_first": "Filip", "name_url": "filip_mazurek", "number": "17" }, { "name_last": "foo", "name_first": "Philipp", "name_url": "philipp_raedecker", "number": "22" }, { "name_last": "Wimmer", "name_first": "Daniel", "name_url": "daniel_wimmer", "number": "87" }, { "name_last": "Michalk", "name_first": "foo", "name_url": "rene_michalk", "number": "8" }, { "name_last": "Jandik", "name_first": "Richard", "name_url": "richard_jandik", "number": "11" }, { "name_last": "Wahne", "name_first": "Daniel", "name_url": "daniel_wahne", "number": "23" }, { "name_last": "Landgraf", "name_first": "Rene", "name_url": "rene_landgraf", "number": "28" }, { "name_last": "Jankovych", "name_first": "Vitezslav", "name_url": "vitezslav_jankovych", "number": "29" }, { "name_last": "Musil", "name_first": "Mojmir", "name_url": "mojmir_musil", "number": "41" }, { "name_last": "Brill", "name_first": "Andreas", "name_url": "andreas_brill", "number": "52" }, { "name_last": "Leyva", "name_first": "Marcel", "name_url": "marcel_leyva", "number": "80" }, { "name_last": "Noack", "name_first": "Marco", "name_url": "marco_noack", "number": "86" }, { "name_last": "Kuhlee", "name_first": "Stephan", "name_url": "stephan_kuhlee", "number": "88" }, { "name_last": "Neumann", "name_first": "Eric", "name_url": "eric_neumann", "number": "93" }, { "name_last": "Schwabe", "name_first": "Jens", "name_url": "jens_schwabe", "number": "38" }, { "name_last": "Jandik", "name_first": "Gerd", "name_url": "gerd_jandik", "number": "o" }, { "name_last": "Kasper", "name_first": "Detlef", "name_url": "detlef_kasper", "number": "1" }]
There is no error message. But the list is not filled with the names. Apparently, theAJAX / JSON-request is not executed.

On a further help I would be very grateful.

steve1964
15 Jun 2011, 8:16 AM
You set grouped: true, but you dont set the getGroupedString in the store...

zwelch
15 Jun 2011, 8:34 AM
You set grouped: true, but you dont set the getGroupedString in the store...

Ok, I've getGroupString added, but nothing changes.


Ext.regModel('team', {
fields: [
{name: 'name_last', type: 'string'},
{name: 'name_first', type: 'string'},
{name: 'name_url', type: 'string'},
{name: 'number', type: 'string'}
]
});


Ext.setup({
onReady: function(){


new Ext.Panel({
fullscreen:true,
style: "background-color: #fee;",
items: [],
dockedItems: [
{
dock: "top",
html: "a docked item",
style: "background-color: #fcc;"
},
//---
{
dock: "top",
items: [{
height: 480,
xtype: 'list',
store: new Ext.data.Store({
model: 'team',
getGroupString : function(record) {
return record.get('name_first')[0];
},
proxy: {
type: 'ajax',
url : 'http://www.tornado-niesky.de/m/json_team.php',
reader: {
type: 'json'
}
}
}),
itemTpl: '<div class="contact"><strong>{name_first}</strong> {name_last}</div>',
grouped: true,
indexBar: true
}]
}
//---
]
});
}
});

Jack9
15 Jun 2011, 10:26 AM
The invalid json you posted starts with

[[{...

ends with
... }]

An extra opening bracket.

zwelch
15 Jun 2011, 10:28 AM
The invalid json you posted starts with

[[{...

ends with
... }]

An extra opening bracket.

Sorry, that was my mistake. Under the link http://www.tornado-niesky.de/m/json_team.php it is valid.

zwelch
15 Jun 2011, 10:35 AM
Under the link http://www.tornado-niesky.de/m/ you can call the app itself and see what happens.

Jack9
15 Jun 2011, 12:51 PM
Ext.regModel('team', {
fields: [
{name: 'name_last', type: 'string'},
{name: 'name_first', type: 'string'},
{name: 'name_url', type: 'string'},
{name: 'number', type: 'string'}
]
});


Ext.setup({
onReady: function(){
var secondPanel = new Ext.Panel({ // or Container, whatever
dock: "top",
items: [{
height: 480,
xtype: 'list',
store: new Ext.data.Store({
model: 'team',
getGroupString : function(record) {
return record.get('name_first')[0];
},
proxy: new Ext.data.AjaxProxy({
url: 'http://www.tornado-niesky.de/m/json_team.php'
,method:'post'
,reader: 'json'
})
//,autoLoad:true // <-- you might want this, dunno
}),
itemTpl: '<div class="contact"><strong>{name_first}</strong> {name_last}</div>',
grouped: true,
indexBar: true
}]
});

var MyPanel = new Ext.Panel({
fullscreen:true,
style: "background-color: #fee;",
dockedItems: [
{
dock: "top",
html: "a docked item",
style: "background-color: #fcc;"
},
secondPanel
] // eof docked items
});
// Otherwise
//MyPanel.dockedItems.items[1].store.load(); // ugly
secondPanel.load(); //better

}
});

zwelch
15 Jun 2011, 1:00 PM
thank you very much.