simple json reading into jqgrid - json

Question

I am trying to read following json data into a jqgrid.
var myStr = { "version" : 2,
"query" : "java",
"location" : "suwanee, ga",
"dupefilter" : true,
"highlight" : true,
"radius" : 25,
"start" : 1,
"end" : 10,
"totalResults" : 826,
"pageNumber" : 0,
"results" : [
{
"jobtitle" : "Software Development Team Lead Job",
"company" : "GM",
"city" : "Roswell",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Roswell, GA",
"source" : "General Motors",
"date" : "Tue, 24 Dec 2013 08:21:00 GMT",
"snippet" : "principles, techniques and best practices. - Demonstrated expert knowledge in <b>Java<\/b> and\/or .NET. - Demonstrated expert knowledge in building, debugging and... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=778874434418454d&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 34.021976,
"longitude" : -84.35714,
"jobkey" : "778874434418454d",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Roswell, GA",
"formattedRelativeTime" : "1 day ago"
}
,
{
"jobtitle" : "Software Systems Engineer (Java\/J2EE)",
"company" : "Universal Business Solutions",
"city" : "Alpharetta",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Alpharetta, GA",
"source" : "Universal Business Solutions",
"date" : "Tue, 17 Dec 2013 18:37:25 GMT",
"snippet" : "years experience with <b>Java<\/b> & J2EE Must be motivated... environment. Experienced with <b>Java<\/b>, J2EE, Oracle, UNIX, SQL, Unix Shell script, <b>Java<\/b> Script, MVC Desired... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=7066b95f71004292&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 34.074177,
"longitude" : -84.29121,
"jobkey" : "7066b95f71004292",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Alpharetta, GA",
"formattedRelativeTime" : "8 days ago"
}
,
{
"jobtitle" : "Software Engineer",
"company" : "ACI Worldwide",
"city" : "Norcross",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Norcross, GA",
"source" : "ACI Worldwide",
"date" : "Thu, 19 Dec 2013 11:51:00 GMT",
"snippet" : "\u2022 Experienced <b>Java<\/b> engineer for developing commercial... development experience \u2022 2 years of professional <b>Java<\/b> development with 2+ years of J2EE. \u2022 2 years of... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=7ac5988d9e5f0990&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 33.93956,
"longitude" : -84.20879,
"jobkey" : "7ac5988d9e5f0990",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Norcross, GA",
"formattedRelativeTime" : "6 days ago"
}
]
};
$("#myGrid").jqGrid({
//url: "testData.xml",
dataType:"json",
data : myStr,
jsonReader: {
repeatitems: false,
root: "results"
},
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto",
loadonce: true
});
I tried to read the data using jsonreader, set the data type as "json" and root as "results".
There are no data populated in jqgrid, Could anybody educate me, what I am missing here ?

Answer 1

The error in your code there are because of small misunderstanding about the meaning of the options jqGrid. If you define a variable like myStr in your code
var myStr = {
"version" : 2,
...
"results" : [
{
...
}
]
};
you don't use JSON. It's just usage of object literals to create new object. Such syntax is the most simple and effective way to create and initialize an object in JavaScript. Only if properties have special characters it's required to enclose property names in " or '. So the same code can be rewritten as
var myStr = {
version : 2,
...
results : [
{
...
}
]
};
So I wanted to stress that the above don't use JSON at all. The correct value of datatype parameter (not dataType) should be "local" instead of "json". The options jsonReader or loadonce will be ignored in the case. The input data should be array of items specified by data option of jqGrid.
So the fixed code should be like the following
$("#myGrid").jqGrid({
datatype: "local",
data: myStr.results,
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
(see the demo).
If your real code do load the data from the server it should use url parameter. In the case the options jsonReader or loadonce can be used and the code will be like below
$("#myGrid").jqGrid({
url: "Sri2.json",
datatype: "json",
jsonReader: {
repeatitems: false,
root: "results"
},
loadonce: true,
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
(see another demo).
You code have strange properties like onmousedown. If you need to set onmousedown property on some cell you can use cellattr property in colModel. It allows you to set any additional property to <td> element which represent the cell of the grid. For example one more demo uses the following code
function indeed_clk (obj, id) {
alert("onmousedown with id=" + id);
}
$(function () {
var myStr = {
...
"results" : [
{
...
"onmousedown" : "indeed_clk(this, '1050');",
...
}
]
};
$("#myGrid").jqGrid({
datatype: "local",
data: myStr.results,
colNames: ["Trending Jobs"],
colModel: [
{
name: "url",
title: false,
cellattr: function (rowId, cellValue, rawObject) {
if (rawObject.onmousedown) {
return 'onmousedown="' + rawObject.onmousedown + '"';
}
}
}
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
});
It set onmousedown attribute which calls global function indeed_clk. onmousedown will be set on the cells in the column url using cellattr property.