Error while reading data from nested JSON using 'convert'

[seema]

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]

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]

Hi Mitchell Simoens,

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

[skirtle]

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]

Hi,
Its working fine now. Thanks a lot!!!!!

[rupamkhaitan]

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