map JSON data to jqGrid

Question

the below code creates a javascript object, converts it to JSON, and attempts to load it into a jqGrid. I have been following the wiki examples, and I feel I have followed their lead very precisely, but still am having no luck. Can anyone see what the missing link is here?

jQuery(document).ready(function () {

    var gridData = {
        total: 2,
        page: '1',
        records: '12',
        rows: [
                        { id: '1', col1: 'cell11', col2: 'cell12', col3: 'cell13' },
                        { id: '2', col1: 'cell21', col2: 'cell22', col3: 'cell23' }
                        ]
    };

    gridData = $.toJSON(gridData);
    $('#jqgrid').jqGrid({
        data: gridData,
        datatype: 'json',
        colNames: ['Col1', 'Col2', 'Col3'],
        colModel: [
                        { name: 'col1' },
                        { name: 'col2' },
                        { name: 'col3' }
                        ],
        jsonReader: {
            root: 'rows',
            total: 'total',
            page: 'page',
            records: 'records',
            repeatitems: false,
            id: '0'
        }
    })

One more remark: I used `$.toJSON` in the past, but then changed to the better and official supported way `JSON.stringify` which are implemented **native** in modern browsers. So I recommend use to load json2.js from https://github.com/douglascrockford/JSON-js or http://www.json.org/js.html and use `JSON.stringify` from the file in the future. If the browser has native support then json2.js use it if not the implementation of `JSON.stringify` in json2.js is very good. — Oleg, Feb 24 '11 at 10:30

score 5 · Accepted Answer · answered Feb 24 '11 at 07:54

5

You don't need convert the data to JSON string. jqGrid will have to convert the data back. In the case you should use datatype:'jsonstring' and datastr:gridData.

The best way would be to use just array of item:

var gridData = [
    { id: '1', col1: 'cell11', col2: 'cell12', col3: 'cell13' },
    { id: '2', col1: 'cell21', col2: 'cell22', col3: 'cell23' }
];
$('#jqgrid').jqGrid({
    data: gridData,
    datatype: 'local',
    ...
});

answered Feb 24 '11 at 07:54

Oleg

220,925
34
403
798

1

Oleg, thank you so much for your excellent insight. Your suggestiones worked perfectly. I should have realized I was turning an object into a string and not some JSON format. I now understand a JSON object is a native JS format. So this leads to a followup question, if I wanted to create a JSON object and load the grid with datatype:'json', how would I change the example to do so? (Step 1 would be to remove the stringify call). – John Livermore Feb 24 '11 at 13:28
1

@John: It seems to me that you continut have some misunderstanding what is JSON format. The construct `var gridData = [{id:'1',col1:'cell11',col2:'cell12',col3:'cell13'},{id:'2',col1:'cell21',col2:'cell22',col3:'cell23'}];` is **NOT** JSON. With the construct one defines JavaScript **object** which is array of another objects. JSON version of the same is **string** `var jsonStr='[{"id":"1","col1":"cell11","col2":"cell12","col3":"cell13"},{"id":"2","col1":"cell21","col2":"cell22","col3":"cell23"}]';`. Both look close, but these are **different** things. – Oleg Feb 24 '11 at 16:30
3

@John: If you want to use `datatype:'json'` the JSON data should be get or posted from the web server. In the simplest situation you should save the data in the text file, place the text file on the web server and use the url to the text tile as the value of the `url` parameter of jqGrid. I recommend you verify the JSON text in http://www.jsonlint.com/. See http://www.ok-soft-gmbh.com/jqGrid/John.txt and http://www.ok-soft-gmbh.com/jqGrid/John.htm as the demo – Oleg Feb 24 '11 at 17:47

map JSON data to jqGrid

1 Answers1

Linked