Home › Forums › Guriddo jqGrid JS › Help › Combining multiple JSON feeds
Hello,
I’m a beginner in Ajax, JSon world so this question can be a little bit noob, but here it goes.
I have JSon feed which gives one user record per html address like this (test data):
|
1 |
{"LGICUS01OperationResponse":{"ca":{"ca_phone_mobile":"07799 123456","ca_last_name":"Pandy","ca_email_address":"A.Pandy@beebhouse.com","ca_house_name":"","ca_customer_num":1,"ca_first_name":"Andrew","ca_postcode":"PI101OO"}}} |
|
1 |
{"LGICUS01OperationResponse":{"ca":{"ca_phone_mobile":"","ca_last_name":"Tracey","ca_email_address":"REFROOM@TBHOLDINGS.COM","ca_house_name":"Tracey Island","ca_customer_num":2,"ca_first_name":"Scott","ca_postcode":"TB14TV"}}} |
I’m now testing if I could use jqGrid to collect all this data to a editable sheet like you have in “Dialogs: Context Menu triggers Edit/Add/Delete”-demo on your http://www.guriddo.net/demo/guriddojs/ site. I don’t know how many rows there are on the server but when one of the name entries are empty I know to stop reading the …/c1/c/n=number further. Should I collect the entries first to some array like you have the data on your demo’s data-sheet or is there some simple way just read the feeds in to the jqgrid sheet directly? Idea is to have a possibility to update the rows also.
As I said this is probably a noob question but I haven’t managed to find any relevant information regarding this so far. Any help would be greatly appreciated.
Hello,
If I understand right I suggest you first to collect the data to array and then send it to the grid. You can do this using different format and settings.
Some information about how to configure the JSON data (little old ) you can find here
Please let us know if you have difficulties with this.
Kind Regards,
Will
Guriddo Support Team
Hello,
I have now managed to get the data to an object array. There are currently 10 entries in myjson[] and every entry looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "LGICUS01OperationResponse": { "ca": { "ca_phone_mobile": "123", "ca_request_id": "01ICUS", "ca_return_code": 0, "ca_dob": "30.09.1965", "ca_last_name": "Tracey", "ca_num_policies": 0, "ca_phone_home": "", "ca_email_address": "REFROOM@TBHOLDINGS.COM", "ca_house_name": "Tracey Island", "ca_policy_data": "", "ca_customer_num": 2, "ca_first_name": "Scott", "ca_house_num": "", "ca_postcode": "TB14TV" } } } |
I can print the information from the array like this:
console.log(myjson[1].LGICUS01OperationResponse.ca.ca_phone_mobile);
I read the wiki page many times you sent, but I have still problems to find out what kind of keywords should I use to read the actual data from these objects. Should I continue postprocessing the array and cleaning LGICUSo1OperationReposense and ca prefixes away so that I would end having an array including like in the examples:
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "rows": [ {ca_first_name: "Davy", ca_last_name: "Crocket"...} {ca_first_name: "Tom", ca_last_name: "Sawyer"...} ... ] } |
Now I’m trying to get this working with the “Dialogs: Context Menu triggers Edit/Add/Delete” example you have. I have only changed the following in the example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
$(document).ready(function () { $("#jqGrid").jqGrid({ url: 'http://192.49.208.193:9081/ci/c/1', // we set the changes to be made at client side using predefined word clientArray editurl: 'clientArray', datatype: "json",´ colModel: [ { label: 'Customer Num.', name: 'ca_customer_num', width: 75, key: true, editable: true, editrules : { required: true} }, { label: 'First Name', name: 'ca_first_name', width: 140, editable: true // must set editable to true if you want to make the field editable }, { label : 'Last Name', name: 'ca_last_name', width: 100, editable: true }, { label: 'Email', name: 'ca_email_address', width: 80, editable: true }, { label: 'Mobile Phone', name: 'ca_phone_mobile', width: 140, editable: true } ], sortname: 'ca_customer_num', sortorder : 'asc', width: 780, height: 200, rowNum: 150, pager: "#jqGridPager", gridComplete: initGrid }); }); |
Also I have tried to put jsonreader parameters after the colModel[]:
<pre class=”code javascript”><span class=”me1″>jsonReader</span> <span class=”sy0″>:</span> <span class=”br0″>{</span>
root<span class=”sy0″>:</span><span class=”st0″>”invdata”</span><span class=”sy0″>,</span>
page<span class=”sy0″>:</span> <span class=”st0″>”currpage”</span><span class=”sy0″>,</span>
total<span class=”sy0″>:</span> <span class=”st0″>”totalpages”</span><span class=”sy0″>,</span>
records<span class=”sy0″>:</span> <span class=”st0″>”totalrecords”</span><span class=”sy0″>,</span>
repeatitems<span class=”sy0″>:</span> <span class=”kw2″>false</span><span class=”sy0″>,</span>
id<span class=”sy0″>:</span> <span class=”st0″>”0″</span>
<span class=”br0″>}</span><span class=”sy0″>,</span>
<span class=”me1″>Â </span>
But they probably conflict somehow with the example parameters or just are not compatible with the data. Any hints to proceed would be greatly appreciated. 🙂
Seems that after some minutes/threshold you cannot edit the posts anymore. Anyway, the last “span, pre, page, span” mess was caused when copied this text from the wiki page and changed from visual to text mode in editing:
|
1 2 3 4 5 6 7 8 |
jsonReader : { root:"invdata", page: "currpage", total: "totalpages", records: "totalrecords", repeatitems: false, id: "0" }, |
Hello,
In your case I think it is good to use jsonmap option in colmodel. The option is described in the link.
We have prepared a example.
Kind Regards,
Will
Guriddo Support Team
Superb!
Very good example, thanks! 🙂
This works very well if no updates(add/edit) needed. However, update feature is crucial in this program. I have managed to build the read/collate functionality so that all the json urls are now read to an object array. The objects looks like I wrote before so eg. myjson[1] has following json object inside it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "LGICUS01OperationResponse": { "ca": { "ca_phone_mobile": "123", "ca_request_id": "01ICUS", "ca_return_code": 0, "ca_dob": "30.09.1965", "ca_last_name": "Tracey", "ca_num_policies": 0, "ca_phone_home": "", "ca_email_address": "REFROOM@TBHOLDINGS.COM", "ca_house_name": "Tracey Island", "ca_policy_data": "", "ca_customer_num": 2, "ca_first_name": "Scott", "ca_house_num": "", "ca_postcode": "TB14TV" } } } |
The unique key is the “ca_customer_num” as you had in the example. The problem is that I have to reconstruct the array somehow if I want to add the ‘{ “rows”:[‘ etc. I have concatenated a simple String variable to have all the data, but I think that’s just a dead end.
My question is that would it be possible to use that json array as a local source like you have in: http://www.guriddo.net/demo/guriddojs/loading_data/array/index.html
When you get an edit/add/delete action jqgrid would update the local array (addRow, editRow, delRow functions), but I would add my own function call which could use “rowkey” variable to identify the object in the array and do the actual update to the server. Here is the full code (I have tried to play with the datatype, data… keywords, but with no success):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 |
<!DOCTYPE html> <html lang="en"> <head> <!-- The jQuery library is a prerequisite for all jqSuite products --> <script type="text/ecmascript" src="/js/jquery.js"></script> <!-- This is the Javascript file of jqGrid --> <script type="text/ecmascript" src="/js/jquery.jqGrid.min.js"></script> <!-- This is the localization file of the grid controlling messages, labels, etc. <!-- We support more than 40 localizations --> <script type="text/ecmascript" src="/js/grid.locale-en.js"></script> <!-- The Context Menu 3rd party plugin that we are using --> <script type="text/ecmascript" src="/js/jquery.contextmenu.js"></script> <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom --> <link rel="stylesheet" type="text/css" media="screen" href="/css/jquery-1.12.1/jquery-ui.css" /> <!-- The link to the CSS that the grid needs --> <link rel="stylesheet" type="text/css" media="screen" href="/css/jqgrid/ui.jqgrid.css" /> <meta charset="utf-8" /> <title>jqGrid Loading Data - JSON</title> </head> <body> <table id="jqGrid"></table> <div id="jqGridPager"></div> <div class="contextMenu" id="contextMenu" style="display:none; width:400px;"> <ul style="width: 400px; font-size: 65%;"> <li id="add"> <span class="ui-icon ui-icon-plus" style="float:left"></span> <span style="font-size:130%; font-family:Verdana">Add Row</span> </li> <li id="edit"> <span class="ui-icon ui-icon-pencil" style="float:left"></span> <span style="font-size:130%; font-family:Verdana">Edit Row</span> </li> <li id="del"> <span class="ui-icon ui-icon-trash" style="float:left"></span> <span style="font-size:130%; font-family:Verdana">Delete Row</span> </li> </ul> </div> <script type="text/javascript"> var myjson = []; var myjsonStr = '{"rows":['; var total = 10; var elements = 0; $(document).ready(function () { for (i = 1; i <= total ; i++) { getCurrentJson(i); } function allDone() { console.log(myjson); myjsonStr = myjsonStr+"]}"; //console.log("List length:"+myjson.length); //console.log(myjson[1].LGICUS01OperationResponse.ca.ca_phone_mobile); initGrid(); } function getCurrentJson(current){ $.ajax({ dataType: "json", url: "http://192.49.208.193:9081/ci/c/"+current, success: function(data){ myjson[current] = data; myjsonStr = myjsonStr+JSON.stringify(data)+","; elements++; if (data.LGICUS01OperationResponse.ca.ca_last_name == "" || elements == total) { console.log("List ended. Total of:"+elements); allDone(); } } }); } //$(document).ready(function () { function initGrid() { //console.log(myjsonStr); //console.log("List length:"+myjson.length); //console.log(myjson[1].LGICUS01OperationResponse.ca.ca_phone_mobile); $("#jqGrid").jqGrid({ //url: 'jqgrid_testdata_2.json', //datatype: "local", data: myjson, // we set the changes to be made at client side using predefined word clientArray editurl: 'clientArray', datatype: "json", colModel: [ { label: 'Customer Num.', name: 'ca_customer_num', jsonmap: 'LGICUS01OperationResponse.ca.ca_customer_num', width: 75, key: true, editable: true, editrules : { required: true} }, { label: 'First Name', jsonmap: 'LGICUS01OperationResponse.ca.ca_first_name', name: 'ca_first_name', width: 140, editable: true // must set editable to true if you want to make the field editable }, { label : 'Last Name', jsonmap: 'LGICUS01OperationResponse.ca.ca_last_name', name: 'ca_last_name', width: 100, editable: true }, { label: 'Email', jsonmap: 'LGICUS01OperationResponse.ca.ca_email_address', name: 'ca_email_address', width: 80, editable: true }, { label: 'Mobile Phone', jsonmap: 'LGICUS01OperationResponse.ca.ca_phone_mobile', name: 'ca_phone_mobile', width: 140, editable: true } ], sortname: 'ca_customer_num', sortorder : 'asc', width: 780, height: 200, rowNum: 150, pager: "#jqGridPager", gridComplete: initGrid }); }; }); function initGrid() { $(".jqgrow", "#jqGrid").contextMenu('contextMenu', { bindings: { 'edit': function (t) { editRow(); }, 'add': function (t) { addRow(); }, 'del': function (t) { delRow(); } }, onContextMenu: function (event, menu) { var rowId = $(event.target).parent("tr").attr("id") var grid = $("#jqGrid"); grid.setSelection(rowId); return true; } }); function addRow() { var grid = $("#jqGrid"); grid.editGridRow("new", { closeAfterAdd: true}); } function editRow() { var grid = $("#jqGrid"); var rowKey = grid.getGridParam("selrow"); if (rowKey) { grid.editGridRow(rowKey, {closeAfterEdit: true}); } else { alert("No rows are selected"); } } function delRow() { var grid = $("#jqGrid"); var rowKey = grid.getGridParam("selrow"); if (rowKey) { grid.delGridRow(rowKey); } else { alert("No rows are selected"); } } } </script> </body> </html> |
Hello,
It is a little bit confused, since you have two functions named initGrid, which I think is not correct.
Anyway – since you use form editing module in order to make updates on the server too one possible solution would be to use afterSubmit event in editRow and delRow methods.
In these events you have all the data and you can make your own ajax to post the data. Do not forget to return array at end of this vent. The syntax is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function editRow() { var grid = $("#jqGrid"); var rowKey = grid.getGridParam("selrow"); if (rowKey) { grid.editGridRow(rowKey, {closeAfterEdit: true, afterSubmit : function(data, postdata, oper) { console.log(data); console.log(postdata); console.log(oper); // add or edit return [true,'']; // or return [false,'error']; and do not forget that when using ajax you may need to use these with care } }); } else { alert("No rows are selected"); } } |
Use similar code for add and del methods.
Kind Regards,
Will
Guriddo Support Team
Thanks again. Need to praise your good product/service to others too. 🙂
The overlapping initGrid function call was just my stupid mistake. Changed the first one now to dataToGrid(). This program would otherwise be in a good shape, but I have still problems with the colmodel mapping function with the actual data. The problem lies here:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
console.log(myjson); console.log("List length:"+myjson.length); console.log(myjson[1].LGICUS01OperationResponse.ca.ca_phone_mobile); $("#jqGrid").jqGrid({ //url: 'jqgrid_testdata_2.json', //datatype: "local", data: myjson, // we set the changes to be made at client side using predefined word clientArray editurl: 'clientArray', datatype: "json", colModel: [ { label: 'Customer Num.', name: 'ca_customer_num', jsonmap: 'LGICUS01OperationResponse.ca.ca_customer_num', width: 75, key: true, editable: true, editrules : { required: true} }, |
The console.log lines gives the right information before the jqGrid function, but some of the jqGrid functions keywords are probably wrong because it cannot read the data. Here is the console output of the problem:
|
1 2 3 4 |
jqgrid_test2.html:80 [1: Object, 2: Object, 3: Object, 4: Object, 5: Object, 6: Object, 7: Object, 8: Object, 9: Object, 10: Object] jqgrid_test2.html:81 List length:11 jqgrid_test2.html:82 07799 123456 jquery.jqGrid.min.js:41 Uncaught TypeError: Cannot read property 'ca_customer_num' of undefined(…) |
I can traverse the objects in console like this:
Myjson_console_log
I have tried different keywords, read your wiki etc, but with no success. Basically there are no ‘”rows”:[‘ keyword there but just plain json objects in an object array. Otherwise the data should look like in the example you sent earlier.
Hello,
When local data array is used the jsonmap does not have effect.
In order to solve the problem in this case you will need to set the name like
json map.
If your data is like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var myjson = [ { "LGICUS01OperationResponse": { "ca": { "ca_phone_mobile": "123", "ca_request_id": "01ICUS", "ca_return_code": 0, "ca_dob": "30.09.1965", "ca_last_name": "Tracey", "ca_num_policies": 0, "ca_phone_home": "", "ca_email_address": "REFROOM@TBHOLDINGS.COM", "ca_house_name": "Tracey Island", "ca_policy_data": "", "ca_customer_num": 3, "ca_first_name": "Scott1", "ca_house_num": "", "ca_postcode": "TB14TV" } } }, ... ]; |
Then in order this to work your jqGrid setup should be like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$("#jqGrid").jqGrid({ datatype: "local", data: myjson, // we set the changes to be made at client side using predefined word clientArray editurl: 'clientArray', colModel: [ { label: 'Customer Num.', name: 'LGICUS01OperationResponse.ca.ca_customer_num', width: 75, key: true, editable: true, editrules : { required: true} }, ... ], ... sortname: 'LGICUS01OperationResponse.ca.ca_customer_num' ... }); |
If you need demo we can prepare such one.
Kind Regards,
Will
Guriddo Support Team
Hello,
Thanks again! 🙂 Finally I got the data reading work correctly. It went just as you wrote above.
Next and last step is to make the update/add working and there is a little problem to be solved. The postdata object you mentioned before includes the whole updated row just as it should be. The thing is that I have to restructure the data for the actual post function and change some information etc. As the time is getting short I just structure a string including all the data/modifications and pass it to the JSON post address. I just cannot find out how to extract the data out of the postdata objest. It shows all the data when I print it to console. Console.log(postdata):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Object LGICUS01OperationResponse.ca.ca_customer_num: "10" LGICUS01OperationResponse.ca.ca_dob: "02.12.1938" LGICUS01OperationResponse.ca.ca_email_address: "" LGICUS01OperationResponse.ca.ca_first_name: "Susan" LGICUS01OperationResponse.ca.ca_house_name: "sdfadf" LGICUS01OperationResponse.ca.ca_house_num: "68" LGICUS01OperationResponse.ca.ca_last_name: "Stranks" LGICUS01OperationResponse.ca.ca_phone_home: "0207 845845" LGICUS01OperationResponse.ca.ca_phone_mobile: "" LGICUS01OperationResponse.ca.ca_policies: "" LGICUS01OperationResponse.ca.ca_policy_data: "" LGICUS01OperationResponse.ca.ca_postcode: "W1A4WW" LGICUS01OperationResponse.ca.ca_request_id: "01ICUS" LGICUS01OperationResponse.ca.ca_return_code: "0" |
I can use JSON.stringify to the whole object, but that’s pretty much useless. Need to find some way to pinpoint the actual data elements in the object, but how? For example: “console.log(postdata.LGICUS01OperationResponse.ca.ca_house_name);” don’t work. Probably something trivial I just don’t understand again…
Hello,
|
1 2 3 4 5 |
for( var k=0; k < postdata.length; k++) { var row = postdata[k]; console.log( row.LGICUS01OperationResponse.ca.ca_house_name ); } |
Regards
Will
Guriddo Support Team
Hello,
Hehe, now it’s working.
Managed to find something out by myself. The postdata.length did only return undefined as the object array has not that attribute. Playing around somewhile I found this:
|
1 2 3 |
for(var keys = Object.keys(postdata), i = 0, end = keys.length; i < end; i++) { var key = keys<em class="d4pbbc-italic"></em>; value = postdata[key]; |
And the rest was just trivial stuff. There is still a small nuance left: the customer number which is used as the key and sorting on the grid doesn’t somehow understand numbers over 10. Now it goes like 1, 10, 11, 12, 2, 3, 4… Does JqGrid somehow treat it like a string and not a number?
Perhaps you put a object as data instead of array.
if you do
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
mydata = []; //array //and then mydata.push( { "LGICUS01OperationResponse": { "ca": { "ca_phone_mobile": "123", "ca_request_id": "01ICUS", "ca_return_code": 0, "ca_dob": "30.09.1965", "ca_last_name": "Tracey", "ca_num_policies": 0, "ca_phone_home": "", "ca_email_address": "REFROOM@TBHOLDINGS.COM", "ca_house_name": "Tracey Island", "ca_policy_data": "", "ca_customer_num": 3, "ca_first_name": "Scott1", "ca_house_num": "", "ca_postcode": "TB14TV" } } }); |
then you will have a array and not a object,
In all cases jqGrid does not tuch the source data it is just stored in the grid parameters.
Regards,
Will
Guriddo Support Team
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top