How to load the JSON data into the Jqgrid?

Question

I use the following way to load the data into the jqgrid.I cant able to load the json data into the jqgrid.So i parse the json to array like mydata=json.parse(jsondata).Then i bind this array(mydata) into jqgrid using datatype: "local".my question is How to bind the json data into the jqgrid?

         $("#datagrid").jqGrid({

                    datatype: "local", 
                    data: mydata,
                    colNames:['companyid','company', 'price', 'Change','perchange','LastUpdated'],
                    colModel:[
                        {name:'companyid',index:'companyid', width:100,editable:true,editoptions:{size:10}},
                        {name:'company',index:'company', width:100,editable:true},
                        {name:'price',index:'price', width:100,editable:true,editoptions:{size:10}},
                        {name:'Change',index:'Change', width:100,editable:true,editoptions:{size:25}},
                        {name:'perchange',index:'perchange', width:100, align:"right",editable:true,editoptions:{size:10}},
                        {name:'LastUpdated',index:'LastUpdated', width:200, align:"right",editable:true,editoptions:{size:10}}
                    ],
                    rowNum:10,
                    rowList:[3,6],
                    loadonce: true,
                    pager: '#navGrid',
                    sortname: 'companyid',
                    sortorder: "asc", 
                    height: 210,
                    width:600,
                    onSelectRow: function(id)
                                 {
                                    getID = jQuery("#datagrid").jqGrid('getCell', id, 'companyid')
                                 },
                    viewrecords: true,
                    caption:"JQ GRID"
                });

JSON format:

    [
        {
            "company": "test",
            "price": 98,
            "Change": 8,
            "perchange": 8,
            "LastUpdated": "2",
            "companyid": 2
        },
        {
            "company": "test123",
            "price": 1,
            "Change": 1,
            "perchange": 1,
            "LastUpdated": "1",
            "companyid": 3
        },
        {
            "company": "abc",
            "price": 1234,
            "Change": 123,
            "perchange": 1,
            "LastUpdated": "1",
            "companyid": 1
        }
    ]

score 7 · Accepted Answer · answered Sep 05 '12 at 12:19

First of all you need to define id of the row in the input data. The id attribute of every row (<tr>) will be set in the corresponding value. Because you have already companyid which could play the role it would be enough to add key: true to the properties of "companyid" column in colModel.

The problem with loading of the date from the server directly (inclusive loading from the file) you can solve by adding jsonReader which describe the format of input data. Because you use loadonce: true the total, records and the page properties of input data will be ignored and you can use jsonReader in the following simple form:

jsonReader: {repeatitems: false, root: function (obj) { return obj; }}

The corresponding demo is here.

If you need to load the data from the array of data which you posted your code should directly work ( see another demo). I suppose use have some other problem in the parsing of JSON data, but you don't posted the corresponding code.

The advice about the id and key: true are still take place. You can use localReader: {id: "companyid"} for the second case and the same property id: "companyid" in the jsonReader alternatively. I personally prefer to use key: true because the code is easy to read and it's independent from the reader used.

How to load the JSON data into the Jqgrid?

1 Answers1

Linked