PDA

View Full Version : JSON Not Loading At All



markwyner
15 Mar 2011, 1:10 PM
Hello,

I've waded through countless examples of getting JSON data into a panel but I simply can't get the data loaded. I'm not getting errors and everything else loads/functions fine. So it must be something really simple. Any help at all would be greatly appreciated.

My folder structure looks like this:

MyProject
-index.html
-js
--application.js
--data.js
--items.json

So the index.html file is in the root and all .js files are in the "js" folder.

My application.js file:


ApplicationName = new Ext.Application({
name: "ApplicationName",
launch: function() {

// ITEMS
//------------------------------------------------------------
ApplicationName.ItemsDetails = new Ext.Panel({
id: 'items_details',
tpl: '<div id="DetailsPanel">You’re viewing details for: <strong>{itemName}</strong></div>',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Items',
ui: 'back',
handler: function() {
ApplicationName.ItemsWrapper.setActiveItem('items_panel', {type:'slide', direction:'right'});
}
}]
}]
});
ApplicationName.ItemsPanel = new Ext.Panel({
id: 'items_panel',
layout: 'fit',
items: [
new Ext.List({
store: ApplicationName.StoreItems,
itemTpl: '{itemName} ({dataCount})',
grouped: true,
onItemDisclosure: function(record) {
var name = record.data.itemName;
ApplicationName.ItemsDetails.dockedItems.items[0].setTitle(name);
ApplicationName.ItemsDetails.update(record.data);
ApplicationName.ItemsWrapper.setActiveItem('items_details', {type:'slide', direction:'left'});
}
})
],
dockedItems: [{
xtype: 'toolbar',
title: 'Items',
items: [{
text: 'Home',
ui: 'back',
handler: function() {
ApplicationName.Viewport.setActiveItem('panel_dashboard', {type:'slide', direction:'right'});
}
}]
}]
});
ApplicationName.ItemsWrapper = new Ext.Panel({
id: 'wrapper_items',
title: 'Items',
iconCls: 'IconItems',
layout: 'card',
items: [ApplicationName.ItemsPanel,ApplicationName.ItemsDetails]
});

// MAIN VIEWPORT
//------------------------------------------------------------
ApplicationName.Viewport = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
defaults: {
scroll: 'vertical'
},
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'fade',
items: [ApplicationName.ItemsWrapper]
});

}
});

My data.js file:


Ext.regModel('Items', {
fields: ['itemName', 'dataCount']
});

PriceBox.StoreItems = new Ext.data.Store({
model: 'Items',
proxy: {
type: 'ajax',
url : 'js/items.json',
reader: {
type: 'json'
}
},
sorters: 'itemName',
getGroupString : function(record) {
return record.get('itemName')[0];
}
});

My items.json file:


[{"itemName": "Airport","dataCount": 3},{"itemName": "Air Hog","dataCount": 3},{"itemName": "Ankle Socks","dataCount": 3},{"itemName": "Asparagus","dataCount": 3},{"itemName": "At-Ats","dataCount": 3},{"itemName": "Avengers","dataCount": 3},{"itemName": "Bananas","dataCount": 3},{"itemName": "Belkin","dataCount": 3},{"itemName": "Bears","dataCount": 3},{"itemName": "Burgundy","dataCount": 3},{"itemName": "Bye","dataCount": 3},{"itemName": "Cat","dataCount": 3},{"itemName": "Cantalope","dataCount": 3},{"itemName": "Cobble","dataCount": 3}]

I have referenced the following documentation (in addition to analyzing the kitchen-sink files):

http://www.sencha.com/blog/using-the-data-package-in-sencha-touch
http://dev.sencha.com/deploy/touch/docs/output/Ext.data.JsonReader.html
http://dev.sencha.com/deploy/touch/docs/output/Ext.DataView.html
http://dev.sencha.com/deploy/touch/docs/output/Ext.data.Reader.html

Based on that I believe my setup is right. So, again, it's likely something small. Everything in the list panel loads fine but when the details panel loads there's no data or even an error. Yet the toolbar and tabpanel tabs load fine in that details panel.

I would LOVE for anyone to point out something that looks amiss.

Thanks in advance!

d5chris
15 Mar 2011, 2:07 PM
Lets narrow it down first: is it loading into your store ok?
Check by opening the chrome JS console and typing:

PriceBox.StoreItems.data.items[0].get('itemName')

or

PriceBox.StoreItems.data.items

markwyner
15 Mar 2011, 2:39 PM
Thanks, Chris! I wasn't aware of using the console to debug like this. Here's what the results of those are:


PriceBox.StoreItems.data.items[0].get('itemName')
TypeError: Result of expression 'PriceBox.StoreItems.data.items[0]' [undefined] is not an object.

PriceBox.StoreItems.data.items
[]

So it looks like the data isn't even loading into my store. Am I missing a load function somewhere?

d5chris
15 Mar 2011, 2:52 PM
Yeah the console is great, you should use it as much as possible.
In your console, you can try this and see if it helps:

PriceBox.StoreItems.load()

If that helps, put it in your code somewhere.
You could also make your store 'autoLoad' i believe but i haven't tried.

markwyner
15 Mar 2011, 3:19 PM
Hmm…that changed things, but it still isn't working. If I type that in the console I get the "loading" animation. And if I add autoload to my store I get the same results:


PriceBox.StoreItems = new Ext.data.Store({
model: 'Items',
proxy: {
type: 'ajax',
url : 'js/items.json',
reader: {
type: 'json'
}
},
autoLoad: true
});

It appears autoLoad is important, but it's still not loading that data because the spinner overlay never subsides and reveals the data.

Thoughts?

d5chris
15 Mar 2011, 3:29 PM
So, after you call load(), what does 'mystore.data.items' return? Just an empty list?
If so, thats good! We've narrowed down your problem to the store.
Having said that, i can't pick any problems with your code, it looks fine to me.
Any errors appearing in the chrome javascript console?

markwyner
15 Mar 2011, 3:37 PM
I was actually using Safari's console. Chrome's console throws a completely different error.

When loading my app after I added autoLoad Chrome's console notes:


XMLHttpRequest cannot load file:///path/to/project/www/js/items.json?_dc=1300231945149&limit=25. Origin null is not allowed by Access-Control-Allow-Origin.

Then it notes:


Uncaught TypeError: Cannot read property 'length' of undefined
sencha-touch-debug.js:7209

Safari's console notes:


TypeError: Result of expression 'records' [undefined] is not an object.
sencha-touch-debug.js:7209

And, yeah, I thought the code looked fine. I've analyzed it many times to see what might be missing.

d5chris
15 Mar 2011, 3:41 PM
The 'file://' in one of those errors leads me to think you're not accessing this from a web server, instead you're just opening the local html file in your browser.

Put it in a web server and see what difference it makes.

Cheers

markwyner
15 Mar 2011, 3:50 PM
Yeah, these are local files. I have the directory set up as a vhost so I can load it that way, but I wasn't doing that because I didn't know the JSON calls would require it to reside in a server environment. Specifically because when the app is loaded onto a device it won't be on a server. Is that the problem?

When I access the same files as a vhost I get a completely different error. In fact, it gets worse because the panel that shows the list doesn't even load in that scenario.

Chrome's console reports:


Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
sencha-touch-debug.js:23405

Safari's console reports:


TypeError: Result of expression 'group.name' [undefined] is not an object.
sencha-touch-debug.js:23405

d5chris
15 Mar 2011, 3:53 PM
I think you're getting further now, which is good.
I think your problem is your group function, try changing it to this:

return record.get('itemName').substr(0,1);

markwyner
15 Mar 2011, 4:09 PM
Interesting. Loading it as a web-server app is the actual solution. And because JSON must be loaded from a web server this won't work installed on an iPhone.

I'm a seasoned web designer/developer but haven't ever used JSON. It's brand new to me. Because of everything I read in Sencha Touch docs/blog-posts I assumed JSON would work on a device.

Consequently this presents a new issue in itself. Sencha Touch can't tap into a device's storage capabilities unless it's Local Storage. But with a 5MB limit that's not a viable option for most persistence needs. And that's where something like PhoneGap comes into play.

Does that sound right? I hate that I have no idea what's happening here, and that I sound like a print designer working in development. Especially when I know most web technologies like the back of my hand. It just so happens that Sencha Touch and JSON are new to me.

Chris, thanks a million for your help. I've learned quite a bit today.

d5chris
15 Mar 2011, 4:16 PM
Yup, we're using phonegap too for our app here, it seems to be a very popular option. You'll just have to run the app store approval gauntlet, thats the only drawback.

So your problem is that you want to load json from within your app, and have your app hosted locally eg with phonegap? Well, i think you're right - it won't load via ajax. You could use JSONP however, that should work fine. Plus, if it's static data then you could just populate your model/store straight in your code. You've got a few options. Stick with it, you'll find a way.

Also, 5 megs is a fair amount of json! You sure you'll need more than that?

Glad to help. Good luck.

markwyner
15 Mar 2011, 6:01 PM
Yup, we're using phonegap too for our app here, it seems to be a very popular option.

Yeah, PhoneGap is awesome. And it's now apparent that I'm at a point in development where I need to embed my app into it so I can tap into their storage API.


You'll just have to run the app store approval gauntlet, thats the only drawback.

Yeah, I think I'll be fine. I'll just have to make my app pure awesomeness!


Well, i think you're right - it won't load via ajax. You could use JSONP however, that should work fine. Plus, if it's static data then you could just populate your model/store straight in your code. You've got a few options. Stick with it, you'll find a way.

Thanks. I need to write, read, and query local data so I'm going to have to plug into each device's local storage with PhoneGap's API.


Also, 5 megs is a fair amount of json! You sure you'll need more than that?

For just the data, yes. But I need to save images. I think I can save images directly to a device's library, but then my app loses control over that storage. So I think that image would count towards the 5MB, and that would cause problems quickly.


Glad to help. Good luck.

Thanks again, Chris. You're the first person to dedicate some time to one of my threads. You're a king.

d5chris
15 Mar 2011, 6:05 PM
Sounds like you're well on track with using phonegap for what you'll need. Good luck with your app, all the best, and thanks for the kind words!

trinitrotoluen
25 Mar 2011, 10:21 AM
I got the same problem when I'm trying to run my sencha touch apps with phonegap on my iphone. is there any alternative solution for this because my apps (with phonegap) running fine on my android :(( , It seems Iphone and android have different approaches/mechanism about this

markwyner
25 Mar 2011, 10:29 AM
JSON must be run from a web server so you won't be able to use it for a pseudo-native app. Technically you could link to a web server for the data, but that wouldn't be a wise decision because your app would be dependent upon an internet connection for its own data.

iOS devices run SQLite which is a great option. And this is accessible via the PhoneGap API. HTML5 offers localstorage which is a super easy solution. But you're limited to 5MB.

So you have to weigh your options about what you're storing and go from there.