PDA

View Full Version : Error while reading data from nested JSON using 'convert'



seema
9 Dec 2011, 6:00 PM
Hi,
I'm facing problem while trying to use 'convert' option of Model, to read values from nested JSON.

here is my extjs code


Ext.define('filterModel', {
extend: 'Ext.data.Model',
fields:
[
{name: 'id'},
{name: 'name'},
{name: 'valueData', convert: getValueData}
],
hasMany: { model: 'values', name:'filtervalues',associationKey: 'filtervalues'},
idProperty:'id'
});

Ext.define('values', {
extend: 'Ext.data.Model',
fields: [
{name: 'displayName',type: 'string'}
],
belongsTo: 'filterModel'
});

function getValueData(v,record) {
var value = record.get('filtervalues');
var valueStr;
var len=value.length;
for(var i=0;i<len;i++){
valueStr+=value[i].get('displayName');
}
return valueStr;
}

var proxyData = new Ext.data.HttpProxy({
url: 'tree.json',
reader: {
type: 'json',
root: 'pdb.user.filterResults.partnerFilter.column'
}
});
var strData = new Ext.data.JsonStore({
model: 'filterModel',
proxy: proxyData
});
var tplData = new Ext.XTemplate(
'<tpl for=".">',
'<a href="javascript:showFilterWindow()" class="preview" title="{valueData}" id="{id}">',
'{name}</a><br/>',
'</tpl>',
'<div class="x-clear"></div>'

);

var dataV = new Ext.DataView({
autoScroll: true, store: strData, tpl: tplData,
autoHeight: false, height: 265,
multiSelect: true, itemSelector: 'div.thumb-wrap',
emptyText: 'No data to display',
loadingText: 'Please Wait...',
style: 'border:1px solid #99BBE8;background:#fff;'
});
var panel = new Ext.Panel({
title: 'List Data View', frame: true, width: 400,
height: 340, id: 'panelBottom', style: 'margin: 0 auto;',
renderTo: 'bottom', items: [dataV]
});

strData.load();


my JSON data looks like:-


{
"pdb": {
"user": {
"filterResults": {
"partnerFilter": {
"column": [
{
"id": "HomeGeography",
"name": "Home GEO",
"filtervalues": [
{
"id": "Japan",
"displayName": "Japan"
}
]
},
{
"id": "BusinessModel",
"name": "Business Model",
"filtervalues": [
{
"id": "Reseller",
"displayName": "Reseller"
}
]
}
]
}
}
}
}
}

I have to create a data view based on name field and have to concate displayName of filtervalues field. as there could be namy filter values.

Problem is while calling this convert function, its throwing me an error "value is undefined". I'm just stuck with this problem. because I'm in a very crutial development stage.

Please suggest.

mitchellsimoens
10 Dec 2011, 7:27 AM
I have wrapped your code in the BBCode code tags so that we can read it. Please do this from now on. You can highlight your code and press the icon in the toolbar that looks like the number sign '#'.
I have also formatted your JSON by pasting it into jsonlint.com so now it's readable and I can tell it's valid.
Is the root in your reader getting mapped correctly?

seema
10 Dec 2011, 9:28 AM
Hi Mitchell Simoens,

I could say that root is mapped correctly because I'm getting values of 'id' and 'name' in my dataview.

skirtle
11 Dec 2011, 4:07 AM
The problem is here:


function getValueData(v,record) {
var value = record.get('filtervalues');

At that point the record will contain an id and name, it won't contain filtervalues.

Add a mapping to your field:


{name: 'valueData', convert: getValueData, mapping: 'filtervalues'}

Then filtervalues will be passed as the first argument to your convert function:


function getValueData(value) {

seema
11 Dec 2011, 12:17 PM
Hi,
Its working fine now. Thanks a lot!!!!!

rupamkhaitan
11 Apr 2013, 4:24 AM
hi

please look at my post here

http://www.sencha.com/forum/showthread.php?261049-Xtemplate-amp-dataview-with-nested-data-Not-working

I (http://www.sencha.com/forum/showthread.php?261049-Xtemplate-amp-dataview-with-nested-data-Not-working) am facing some other issue to render the data in my dataview when json is nested object