I am getting a JSON.parse: unexpected character exception while I am trying to read a local JSON in my JQGrid.
<script type="text/javascript">
var jsondata = {
"totalpages": "1",
"currpage": "1",
"totalrecords": "2",
"invdata" : [
{"name":"New York City", "country":"USA", "continent":"NorthAmerica"},
{"name":"Paris", "country":"France", "continent":"Europe"}
]
};
$(document).ready(function() {
$("#grid").jqGrid({ data: jsondata,
datatype: "json",
colNames: ["Name", "Country", "Continent"],
colModel: [{
name: 'name',
index: 'name',
editable: true,
}, {
name: 'country',
index: 'country',
editable: true,
}, {
name: 'continent',
index: 'continent',
editable: true,
}],
pager: '#pager',
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
caption:"Dynamic hide/show column groups"
}).navGrid("#pager",{edit:false,add:false,del:false});
jQuery("#hc").click( function() { jQuery("#grid").jqGrid('hideCol',["continent"]); });
jQuery("#sc").click( function() { jQuery("#grid").jqGrid('showCol',["continent"]); });
});
</script>
I have tried to lookup in the jqgrid Wiki but still unable to figure out what's wrong. Is there a problem with the jsonReader? I have checked related questions but it didn't help much.
Instead of giving "jsondata" as a parameter to "data" for the jqgrid, give data : jsondata.invdata
Related
I'm trying to load a store from JSON received from webservices. But all the data from the JSON goes under the 'raw' column of the items in the store...
I can't figure out why, my code seems correct.
Any help is welcome.
My Model :
Ext.define('App.model.Node', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'int' },
{ name: 'version', type: 'int' },
{ name: 'user_id', type: 'int' },
{ name: 'tstamp', type: 'date' },
{ name: 'changeset_id', type: 'int' },
{ name: 'tags', type: 'string' },
{ name: 'geom', type: 'string'}
],
idProperty: 'id'
}
});
My Store :
Ext.define('App.store.NodeStore', {
extend: 'Ext.data.Store',
xtype: 'nodestore',
requires: [
'Ext.data.proxy.Rest'
],
config: {
model: 'App.model.Node',
storeId: 'nodeStore',
autoLoad: true,
proxy: {
type:'rest',
url:'http://localhost/server/nodes',
reader: {
type:'json',
rootProperty: 'nodes'
},
noCache: false,
limitParam: false,
headers: {
'Accept' : 'application/json'
}
}
}
});
My JSON :
{
"nodes": [
{
"id": "454467",
"version": 6,
"user_id": 52015,
"tstamp": "2008-12-27 21:38:45",
"changeset_id": "634766",
"tags": "",
"geom": "0101000020E6100000409CD1A0B29321405455682096804740"
},
{
"id": "454468",
"version": 8,
"user_id": 52015,
"tstamp": "2009-12-23 20:47:15",
"changeset_id": "3437205",
"tags": "",
"geom": "0101000020E6100000357C0BEBC69321409EC02ACD9C804740"
},
{
"id": "454469",
"version": 7,
"user_id": 52015,
"tstamp": "2009-12-23 20:47:15",
"changeset_id": "3437205",
"tags": "",
"geom": "0101000020E6100000347914F8D4932140B8BBBD5AA4804740"
}
]
}
And when I do a
var nodeStore = Ext.getStore('nodeStore');
nodeStore.load();
console.log(nodeStore.getData());
we can see the following object, with my data in the raw column under items...
I figured it out, my code is correct and the only thing missing is a callback in the load() function :
nodeStore.load({
callback: function(records, operation, success) {
console.log(records);
console.log(nodeStore.getCount());
nodeStore.each(function(element) {
console.log(element.data.id);
});
},
scope: this,
});
The problem was I was trying to access the store before it loaded the data. Now I'm waiting that all the data is loaded to access it, and it works.
I have looked various question/answers on stackoverflow, but haven't found a solution.
When I use the first block of jqgrid code (data is local), the table and the data are displayed.
When I use the second block (data loaded from url), an empty table is displayed.
The strange part is that the local data is the actual content of the url file.
So I had assumed that the behavior would be identical.
Why can I not display the data using the url,
when the same data, if copied into the code, is displayed?
The HTML (calls mytest.js which contains the jqgrid code):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" href="ui.jqgrid.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery-ui-1.8.23.custom.min.js"></script>
<script src="grid.locale-en.js"></script>
<script src="jquery.jqGrid.min.js"></script>
<script src="mytest.js" type="text/javascript"></script>
</head>
<body>
<h1>hey</h1>
<table id="jqgrid"></table>
</body>
</html>
JSON as local data (data displays, [here, edited for brevity]):
var mydata = [
{"_id": {"$oid": "50a3f962b7718da1a3090fa9"},
"config": {"titlepage":
{"title": "My First Title",
"color": true,
"fontsize": "42/44",
}
}
},
{"_id": {"$oid": "50a3f962b7718da1a3090faa"},
"config": {"titlepage":
{"title": "My Second Title",
"color": true,
"fontsize": "42/44",
}
}
}
];
jQuery(document).ready(function(){
$('#jqgrid').jqGrid({
datatype: 'local',
data: mydata,
jsonReader: {
repeatitems : false,
},
caption: 'Titlepage Parameters',
colNames: ['title', 'color','fontsize'],
colModel: [
{name: 'config.titlepage.title'},
{name: 'config.titlepage.color'},
{name: 'config.titlepage.fontsize'},
],
});
});
JSON via URL (no data displayed). The file mydata.json contains the same data
that is used above, but in a local file instead of in the actual js code:
jQuery(document).ready(function(){
$('#jqgrid').jqGrid({
url:'mydata.json',
datatype:"json",
jsonReader: {
repeatitems : false,
},
caption: 'Titlepage Parameters',
colNames: ['title', 'color','fontsize'],
colModel: [
{name: 'config.titlepage.title'},
{name: 'config.titlepage.color'},
{name: 'config.titlepage.fontsize'},
],
});
});
First of all I would fix a little your first version of working code. jsonReader will be not used if you use jsonReader. Instead of that it will be used localReader. Additionally I would recommend you always use native id values if the input data have such one. So I would fix the code to the following:
$(function () {
"use strict";
var mydata = [
{
"_id": {"$oid": "50a3f962b7718da1a3090fa9"},
"config": {
"titlepage": {
"title": "My First Title",
"color": true,
"fontsize": "42/44"
}
}
},
{
"_id": {"$oid": "50a3f962b7718da1a3090faa"},
"config": {
"titlepage": {
"title": "My Second Title",
"color": true,
"fontsize": "42/44"
}
}
}
];
$('#jqgrid').jqGrid({
datatype: 'local',
data: mydata,
caption: 'Titlepage Parameters',
gridview: true,
height: 'auto',
colNames: ['title', 'color', 'fontsize'],
colModel: [
{name: 'config.titlepage.title' },
{name: 'config.titlepage.color' },
{name: 'config.titlepage.fontsize' },
],
localReader: {
id: "_id.$oid"
}
});
});
See the first demo.
In case of usage datatype: "json" you need to fix the jsonReader:
$(function () {
"use strict";
$('#jqgrid').jqGrid({
datatype: 'json',
url: 'Tim2.json',
caption: 'Titlepage Parameters',
gridview: true,
height: "auto",
//colNames: ['title', 'color', 'fontsize'],
colModel: [
{name: 'title', jsonmap: 'config.titlepage.title' },
{name: 'color', jsonmap: 'config.titlepage.color' },
{name: 'fontsize', jsonmap: 'config.titlepage.fontsize' },
],
jsonReader: {
repeatitems: false,
id: "_id.$oid",
root: function (obj) {
return obj;
}
}
});
});
See another demo.
Oleg's answer is the full solution.
Here is the modified code which works. That is, the code I originally wrote plus the one change (from Oleg) that successfully loaded the data into the grid. The key for me was to add the root function in jsonReader:
jQuery(document).ready(function(){
$('#jqgrid').jqGrid({
url:'mydata.json',
datatype:"json",
jsonReader: {
root: function (obj) { return obj; },
repeatitems : false,
},
caption: 'Titlepage Parameters',
colNames: ['title', 'color','fontsize'],
colModel: [
{name: 'config.titlepage.title'},
{name: 'config.titlepage.color'},
{name: 'config.titlepage.fontsize'},
],
});
});
Hi guys I hope someone can help me with this I´m really stuck although it´s some damned beginner question that has already been answered and I assure you I read all of the answer Posts but still can´t get it to work.
I´m using Sencha Touch 1.1.1 and try to get this Store loaded with nested JSON data. Here´s the code:
Ext.regModel("UserData", {
hasMany : [{
name : "id",
type : "integer",
},{
name : "username",
type : "string",
},{
name : "password",
type : "string",
}]
});
var userdata =
{"users": [
{
"id": 16,
"username": "bla#bla.com",
"password": "bla",
}, {
"id": 17,
"username": "bla#bla.com",
"password": "bla",
}
]
};
var myStore = new Ext.data.Store({
model : 'UserData',
data : userdata,
proxy : {
type : 'ajax',
reader : {
type : 'json',
root : 'users' // not working
}
}
});
var myList = new Ext.List ({
fullscreen : true,
store : myStore,
grouped : false,
itemTpl : '<div>{username}</div>'
});
Returns Uncaught Type Error: Arguments list has wrong type. When I rewrite the JSON with an outer Array wrapper, it works, but with wrong root (not users) I definitly saw examples where this worked with the root:'' value.
var userdata =
[ {"users": [
{
"id": 16,
"username": "bla#bla.com",
"password": "bla",
}, {
"id": 17,
"username": "bla#bla.com",
"password": "bla",
}
]
} ];
What am I missing?
If I am not mistaken, in your "UserData" model, it should be fields instead of hasMany.
And try putting your json data in a separate json file and locate the path in your store's proxy.
var myStore = new Ext.data.Store({
model: 'UserData',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'json',
root: 'users'
}
}
});
I tested it and it's working fine here. Here is my full code.
Ext.regModel("UserData", {
fields: [
{name: 'id', type:'int'},
{name: 'username', type:'string'},
{name: 'password', type:'string'}
]
});
var myStore = new Ext.data.Store({
model: 'UserData',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'json',
root: 'users'
}
}
});
var app = new Ext.Application({
name: 'TestApp',
useLoadMask: true,
launch: function() {
TestApp.views.listToolbar = new Ext.Toolbar({
title: 'Foo Bar',
layout: 'hbox'
});
TestApp.views.list = new Ext.List({
id: 'list',
store: myStore,
emptyText: 'Nothing',
itemTpl: '<div class="username">{username}</div>',
});
TestApp.views.container = new Ext.Panel({
layout: 'fit',
html: 'this is the container',
dockedItems: [TestApp.views.listToolbar],
items: [TestApp.views.list]
});
TestApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [
TestApp.views.container
]
});
}
});
I am not able retrieve records from complex json objects but i am able to get the data when using an TPL.
Please see the below example codes:
JSON:
{
"lists": [
{
"title": "Groceries",
"id": "1",
"items": [
{
"text": "contact solution - COUPON",
"listId": "1",
"id": "4",
"leaf": "true"
},
{
"text": "Falafel (bulk)",
"listId": "1",
"id": "161",
"leaf": "true"
},
{
"text": "brita filters",
"listId": "1",
"id": "166",
"leaf": "false"
}
]
}
]
Model:
Ext.regModel("TopModel",
{
fields: [
{ name: 'title', type: 'string' },
{ name: 'id', type: 'string' },
],
hasMany: [
{ model: 'SubModel', name: 'items' }
],
proxy: {
type: 'ajax',
url : 'test/lists.json',
actionMethods: {
create: 'POST',
destroy: 'POST',
read: 'POST',
update: 'POST'
},
reader: {
type: 'json',
root: function(data) {
return data.lists || [];
}
}
}
});
Ext.regModel("SubModel",
{
fields: [
{ name: 'text', type: 'string'},
{ name: 'listId', type: 'string'},
{ name: 'id', type: 'string'},
{ name: 'leaf', type: 'string'}
]
});
In my View file, i have defined the store as below.
this.stores = new Ext.data.Store({
clearOnPageLoad: false,
autoLoad:true,
model:'TopModel',
getGroupString: function(record) {
return record.get('leaf');
}
});
});
I am not able to retrieve the values for record.get('leaf') as this refers to the child model items. When I tried to print it, it prints as undefined.
How to access the child attributes? Here 'items' is listed as an array.
I tried to display the data using list as below. All the records are displayed but the problem is that it is picked as one whole item instead of separate list for each item.
var list = new Ext.List({
cls: 'big-list',
grouped : true,
emptyText: '<div>No data found</div>',
itemTpl: ['<div><tpl for="items">',
'<div>',
'{id} {text}',
'</div>',
'</tpl></div>',
],
store: this.stores,
listeners: {
itemtap: this.onListItemTap,
scope: this
}
});
Kindly help me on how to get the list items to be displayed as individual records.
you can use online json parser(http://json.parser.online.fr/) to parse json xml from parser data you easily seprate objects and arrays and you get all data which are require for you..i hope this help you
Here's the JSON:
{
"page": "1",
"total": "1",
"records": "2",
"rows": [
{
"Id": 3,
"FirstName": "Test",
"LastName": "Testerson",
"CustomerNumber": "1234",
"EmailAddress": "test#test.com",
"Subject": "Test1",
"OrderNumber": "4321",
"Comments": "This is a test"
},
{
"Id": 4,
"FirstName": "Test2",
"LastName": "Testerson2",
"CustomerNumber": "2222",
"EmailAddress": "test#test.com",
"Subject": "Test1",
"OrderNumber": "3333",
"Comments": "This is a test"
}
]
}
Here's my current script and markup (why isn't this working?):
<table id="list1"></table>
<div id="pager1"></div>
<script type="text/javascript">
function getData(pdata) {
var params = new Object();
params.page = pdata.page;
params.pageSize = pdata.rows;
params.sortIndex = pdata.sidx;
params.sortDirection = pdata.sord;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "ScriptServices/PNScriptService.asmx/GetContactRequests",
data: JSON.stringify(params),
dataType: "json",
success: function (data, textStatus) {
if (textStatus == "success") {
var thegrid = $("#list1")[0];
thegrid.addJSONData(data.d);
}
},
error: function (data, textStatus) {
alert('An error has occured retrieving the data.');
}
});
}
$(document).ready(function () {
$("#list1").jqGrid({
datatype: function (pdata) {
getData(pdata);
},
jsonReader: {
page: "page",
total: "total",
records: "records",
root: "rows",
id: "Id",
repeatitems: false
},
colNames: ['Id', 'FirstName', 'LastName', 'CustomerNumber', 'EmailAddress', 'Subject', 'OrderNumber', 'Comments'],
colModel: [
{ name: 'Id', index: 'Id', width: 90 },
{ name: 'FirstName', index: 'FirstName', width: 100 },
{ name: 'LastName', index: 'LastName', width: 100 },
{ name: 'CustomerNumber', index: 'CustomerNumber', width: 80, align: "right" },
{ name: 'EmailAddress', index: 'EmailAddress', width: 100 },
{ name: 'Subject', index: 'Subject', width: 80 },
{ name: 'OrderNumber', index: 'OrderNumber', width: 80, align: "right" },
{ name: 'Comments', index: 'Comments', width: 250, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: $('#pager1'),
sortname: 'Id',
viewrecords: true,
sortorder: "desc",
caption: "Contact Requests"
});
});
</script>
btw: The JSON string above is the exact string returned by the script service. I can hit a break point in my script service and grab that string, and I can alert the string in the calling ajax script on success, and the strings are identical. So I know it's not the script service, and I know that that json string is being passed, as shown, into the jqGrid.
Your problem is that you user very very old template code for loading JSON data. If your server produce the JSON data which you posted you can simplify for code to the following.
In another answers you will find more code examples in case you use ASMX, which produce a litle other JSON code as you posted.
Thanks Oleg for the info, but it turned out to be the following:
thegrid.addJSONData(JSON.parse(data.d));
I needed to JSON.parse the data before passing it into the grid.