extjs 5 parsing json in store - javascript

I am using a reader in a store to parse a json response:
{ "results": 2,
"errors": "",
"success": true,
"data": [{
"list": [{
"code": "123456",
"otherCode": "Y"
},
{"code": "369852",
"otherCode": "G"
}],
"failedHost": false,
"hostMessage": "",
"hostReturnCode": 0
} ]}
And this is my store:
var gridStore = Ext.create('Ext.data.Store',
{
proxy:
{
url: "myUrl",
reader:{
type: 'json',
rootProperty: 'list',
totalProperty: 'results'
},
type: 'ajax',
model: 'myModel'}}
The server is responding correctly but my store don't parse the response. The problem in my opinion is the deeper rootProperty, but I have found no solution.

Your rootProperty needs to be:
rootProperty: 'data[0].list'
instead of:
rootProperty: 'list'

Related

Meteor: Multidimensional array of objects inserting null into database (SimpleSchema)

I'm trying to $set a multidimensional array of objects ("log") in Meteor on the server side. Every time I do the operation, the objects all appear as null after the update. I suspect it might be a problem with my SimpleSchema, but I can't find any answers on how to do it properly. At worst, since it's all generated by the server, is there any way I can just disable verification of this field entirely in SimpleSchema?
Example update:
{ $set: {
log: [
[
[{
"event": "ability",
"sourceId": "Attack",
"result": true,
"timestamp": "2015-12-01T09:11:07.465Z",
"selfId": "p2",
"targetId": "e1"
}, {
"event": "effect",
"sourceId": "dealBaseDamage",
"result": 7,
"timestamp": "2015-12-01T09:11:07.467Z",
"selfId": "p2",
"targetId": "e1"
}],
[]
]
]
} }
And this gives the following result in the database after the operation:
"log": [
[
[
null,
null
],
[]
]
]
My schema is as follows:
log: {
type: Array,
},
'log.$': {
type: Array,
},
'log.$.$': {
type: [Object],
optional: true,
blackbox: true
}
I've also tried this:
log: {
type: Array,
},
'log.$': {
type: Array,
},
'log.$.$': {
type: Array
},
'log.$.$.$': {
type: Object,
optional: true,
blackbox: true
}

Ext JS Read JSON response before reader in Store

I have JSON response as below -
{
"success": true,
"data": {
"data": [
{
"resultsMap": {
"Title": "Test1",
"Name": "Test1"
},
"id": 1
},
{
"resultsMap": {
"Title": "Test2",
"Name": "Test2"
},
"id": 2
}
],
"total": 2
}
}
I am using a custom reader to extract the data. Problem is I loose the initial JSON response from the server from which I need to extract the "total". Can someone help me in getting the "total" from the json response?
var newStore = Ext.create('Ext.data.BufferedStore', {
pageSize: 2000,
fields:fields,
//leadingBufferZone:50,
//trailingBufferZone:50,
//autoLoad: {start: 0, limit: 2000},
remoteSort: true,
sorters: [{
property : 'name',
direction: 'asc'
}],
proxy: {
type: 'ajax',
url: 'getData.json',
reader: {
type: 'nestedjsonreader',
rootProperty: 'data',
totalProperty: function(data) {
//console.log(data);
return data.totalCount;
},
},
extraParams: {
id:ID
}
},
listeners: {
'load' : function(store, records, success, options){
//the complete response
console.log(store.getProxy().getReader().rawData);
}
}
});
Ext.define('Portal.model.NestedJsonReader', {
extend: 'Ext.data.reader.Json',
alias: 'reader.nestedjsonreader',
readRecords: function(data) {
var arr = data.data.data;
var data = [];
if(arr!=undefined){
for(var i=0;i<arr.length;i++){
var obj = arr[i].resultsMap;
data.push(obj);
}
}
return this.callParent( [ data ]);
}
})
Create a custom property in your store as resp_total and assign data.total to it.

Recreating Ajax POST

I want to recreate Ajax POST which I can peak via Chrome's debugger.
I created post like this:
$.ajax({
method: "POST",
url: url,
contentType: "application/json; charset=UTF-8",
data: { "defaults": "default", "culture": "en-US", "skip": 20, "take": 20, "query": "", "filters": [], "fulltext": [], "sorting": { "field": "ModifiedOn", "asc": false } }
})
.done(function (msg) {
alert("Data Saved: " + msg);
});
I'm getting 500 error. I check and my Request Payload looks like this:
defaults=default&culture=en-US&skip=20&take=20&query=&sorting%5Bfield%5D=ModifiedOn&sorting%5Basc%5D=false
However the source post, which I want to recreate has different Request Payload:
{"defaults":"default","culture":"en-US","skip":20,"take":20,"query":"","filters":[],"fulltext":[],"sorting":{"field":"ModifiedOn","asc":false}}
I think it is causing the error.
How can I modify my request to make Request Payload look like the latter one?
data: { "defaults": "default", "culture": "en-US", "skip": 20, "take": 20, "query": "", "filters": [], "fulltext": [], "sorting": { "field": "ModifiedOn", "asc": false } }
This line is causing the Error. You need to stringify your Data like so:
data: JSON.stringify({ "defaults": "default", "culture": "en-US", "skip": 20, "take": 20, "query": "", "filters": [], "fulltext": [], "sorting": { "field": "ModifiedOn", "asc": false } })
Please read the documentation about jQuery.ajax()-function. You can check all Parameters with their Type.

JQXMenu Databind with JSON

I am developing an application where I need to fetch the menu items from a text file.
I am new to JQX.
But while displaying the records its showing nothing.
My Text File(LeftMenu.txt) as below:
[{
"text": "Menu1",
"id": "1",
"parentid": "-1"
},
{
"text": "Menu2",
"id": "2",
"parentid": "-1"
},
{
"text": "Menu3",
"id": "3",
"parentid": "-1"
}
]
==========================================================================
The code is here under
// prepare the data for Left Menu
var urlleftpanel = "../../Public/sampledata/leftmenu.txt";
var sourceleftmenu =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'parentid' },
{ name: 'text' }
],
id: 'id',
url: urlleftpanel
};
// create data adapter.
var dataAdapter1 = new $.jqx.dataAdapter(sourceleftmenu);
// perform Data Binding.
dataAdapter1.dataBind();
var records = dataAdapter1.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
var records = da.records;
$('#jqxWidget').jqxMenu({ source: records , height: 53, theme: theme, width: '95px' });
=====================================================================================
Please Help its very urgent
Thanks in Advance
Try setting async: false in the source object.
var sourceleftmenu =
{
datatype: "json",
async: false,
datafields: [
{ name: 'id' },
{ name: 'parentid' },
{ name: 'text' }
],
id: 'id',
url: urlleftpanel
};

How to add response from AjaxRequest to a store or display it on a list

I had a sencha touch code which connects to a WebService using Ext.Ajax.request. On success function, I want the response to be displayed in a list or store it in a Store.
Please help me how to do that. Below is my code.
var View = function() {
Ext.getBody().mask('Loading...', 'x-mask-loading', false);
Ext.Ajax.request({
url: 'URL',
method: 'GET',
success: function(response, opts)
{
var obj = Ext.util.JSON.decode(response.responseText);
Ext.getCmp('content').update(response.responseText);
}
});
};
create a Ext.List with store attribute,
myStore = new Ext.data.Store({
model: Ext.regModel('', {
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'age', type: 'string'}
]
})
});
myList = new Ext.List({
store: myStore,
itemTpl: '<div>{name}</div>' +'<div>{age}</div>'
});
Then fill the myStore store with results of Agax request. onsuccess event in ajax call should be as follows,
var jsonData = Ext.util.JSON.decode(response.responseText);
myStore.add(jsonData['myresultlist']);
myStore.sync();
Then make sure You are returning a valid json from the server side as follows,
{
"myresultlist": [
{
"id": "1",
"name": "anne",
"age": "21"
},
{
"id": "2",
"name": "jack",
"age": "26"
},
{
"id": "3",
"name": "Tom",
"age": "21"
}
],
"success": "true",
"info": "My Results List!"
}

Categories

Resources