PDA

View Full Version : Code not displaying complex JSON file in a Panel



jjosephs
21 Nov 2011, 12:28 AM
I am trying to use a JSON file to populate a grid but the JSON file is complex. Below is my JavaScript File and below that is link to my JSON file.

Note that the fields I am experimenting with in the JSON file are located at the top.I have tried everything but I can only get 'server_time' if I remove the 'root' and 'record' from the 'reader', so that proves the it works on some level but I can't get anything else no matter which configuration I try.

Please help me solve this issue. Thanks in Advance!




Link to JSON File LINK (http://julianjosephs.com/company_list.json)

ExtJS Code


Ext.onReady(function(){
Ext.define('Jobs', {
extend: 'Ext.data.Model',

hasMany: {model: 'Job', name: 'job', associationKey:'job'},

proxy: {
type: 'ajax',
url : 'results/company_list.json',
reader: {
type: 'json',
root: 'jobs'
}
}
});

Ext.define("Job", {
extend: 'Ext.data.Model',
fields: [
'op_comm_status', 'job_category_level_two', 'op_description'
],

belongsTo: 'Jobs'
});


var store = Ext.create('Ext.data.Store', {
model: 'Jobs'
});

store.load();

var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Status',
dataIndex: 'op_comm_status'
},{
header: 'Category Level Two',
dataIndex: 'job_category_level_two'
},{
header: 'Description',
dataIndex: 'op_description'
}]
});



grid.render(Ext.getBody());
})

tvanzoelen
21 Nov 2011, 12:37 AM
Your jobs property in the JSON is not an array. try

jobs: [{}, {}]

The top level must be an array. The properties in that level will be displayed in the grid. Properties like
job: { prop:'' , prop2} et cetera will not be displayed unless you specify a specific renderer on the column for that.

jjosephs
21 Nov 2011, 8:41 AM
Why do I have to put an [{}, {}]?

I made the changes and used a renderer but all I get is undefined


var grid = Ext.create('Ext.grid.Panel', { store: store,
columns: [{
header: 'Status',
dataIndex: 'op_comm_status',
renderer: function(value, metaData, record, rowIndex, colIndex ){
if(value == undefined){
return 'undefined';
}
else{
return value;
}

}
},{
header: 'Category Level Two',
dataIndex: 'job_category_level_two'
},{
header: 'Description',
dataIndex: 'op_description'
}]
});

tvanzoelen
21 Nov 2011, 9:08 AM
I think an array with records is expected if you define jobs as root in the reader.

jjosephs
21 Nov 2011, 9:14 AM
I generate the JSON file from a 3rd party API and that's what they send me, JSON without the [] at jobs...

It should still be able to work with ExtJS right?

tvanzoelen
21 Nov 2011, 10:01 AM
the format should be,


jobs: [{"engagement_weeks":"Less than 1 week","op_reason":"","op_comm_status":"Active","op_low_hourly_rate_active_interviewees":"","job_category_level_two":"Web Design","op_is_viewable":"1","engagement_related":"5","op_description":"I need a talented designer to create PSD comps from existing wire frames, based on our current site style (www.dogvacay.com). I have PSD files from other parts of the site, which you can leverage. \n\nNext I need the comps converted into html, with good comments, for my developer to implement. \n\nI prefer designers close to USA time zone to facilitate communications.","op_pref_fb_score":"0","candidates_total_active":"0","op_low_bid_active_interviewees":"","op_job_expiration":"December 21, 2011"},{nextjob}]

fields like job_category_level_two are now under property job and will not be found. Try to set job as root instead of jobs and see what happens.

jjosephs
21 Nov 2011, 10:12 AM
Forget it, JSON is a headache. I just switched to XML, simplified the code and it was working in 5 minutes, compared to the 6+ hours I have already wasted with the JSON version, XML is definitely easier to work with.

Thanks for the attention tvanzoelen

tvanzoelen
21 Nov 2011, 10:36 AM
Json should work. And I see that jobs is an array now.

The grid will only display the properties that are under jobs directly, the properties you want to see are under job.

See http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader to load nested data. But I don't see any good solution on the forum or in the docs how to display the nested data in a grid.