How can I get this JSON to jqGrid?

Question

I'm having troubles reading this kind JSON from a server that i can't access, so i can't manipulate the JSON:

{
    "API_ICDFactory": {
        "API_getDataSample": {
            "key_0": {
                "dateTransaction": "1379454296",
                "dateBilling": "1387320296",
                "units": "181",
                "priceUnit": "25.12",
                "amount": "4546.72",
                "company": "Juan Vivas Taller",
                "productRef": "CAR",
                "productDesc": "Detergente especial antiestático"
            },
            "key_1": {
                "dateTransaction": "1377421074",
                "dateBilling": "1385373474",
                "units": "137",
                "priceUnit": "8.99",
                "amount": "1231.63",
                "company": "Autos Caceres 2000",
                "productRef": "BRICAR",
                "productDesc": "Cera hidrofugante para túneles de lavado"
            },
            "status": "success"
        }
    }
}

I don't have exactly the idea of how to get the elements from this Json. If anyone could help me to do it.

I'm trying to manipulate this piece of code from th jqGrid documentation but i can't get any result.

jQuery(document).ready(function(){ 
    jQuery("#grid").jqGrid({
        url: "url...",
        datatype: "json",
        mtype: "GET",
        colNames: ['Fecha Trans','Fecha Pago', 'Cliente'],
        colModel: [
            {name:'dateTransaction',index:'dateTransaction', width:100,editable:true},
            {name:'dateBilling',index:'dateBilling', width:100,editable:true},
            {name:'company',index:'company', width:100,editable:true}
        ],
        jsonReader: {
            repeatitems:false
        },
        rowNum:10,
        rowList:[10,20,30],
        pager: jQuery('#pager'),
        sortname: 'name',
        viewrecords: true,
        sortorder: 'asc',
        caption:'Title',
        editurl:'url...'
   }).navGrid('#pager');
});

If anyone could show me the correct syntax for this JSON i could do the rest.

Thanks!

Answer 1

You have to convert the JSON data returned from the server to array of items which can be read by jqGrid. Additionally I'd recommend you to use loadonce: true option so that you can use local paging, sorting and filtering/searing inside of jqGrid.

The conversion of input data you can do for example by defining root part of jsonReader as function. Alternatively you can use beforeProcessing callback to change server response. For example you can use the following jsonReader

jsonReader: {
    root: function (obj) {
        var input = obj.API_ICDFactory.API_getDataSample, p, res = [], item;
        for (p in input) {
            item = input[p];
            if (input.hasOwnProperty(p) && typeof item === "object") {
                item.id = p;
                res.push(item);
            }
        }
        return res;
    },
    repeatitems: false
}

The demo demonstrate my suggestion. It displays

The full code which I used you can find below:

$(function () {
    "use strict";
    var intTemplate = { width: 100, formatter: "integer", sorttype: "integer", align: "right" };
    $("#grid").jqGrid({
        url: "victorgb6.json",
        datatype: "json",
        colNames: ["Fecha Trans", "Fecha Pago", "Cliente"],
        colModel: [
            { name: "dateTransaction", template: intTemplate },
            { name: "dateBilling", template: intTemplate },
            { name: "company" }
        ],
        cmTemplate: {width: 250, editable: true},
        gridview: true,
        height: "auto",
        autoencode: true,
        loadonce: true,
        jsonReader: {
            root: function (obj) {
                var input = obj.API_ICDFactory.API_getDataSample, p, res = [], item;
                for (p in input) {
                    item = input[p];
                    if (input.hasOwnProperty(p) && typeof item === "object") {
                        item.id = p;
                        res.push(item);
                    }
                }
                return res;
            },
            repeatitems: false
        },
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#pager",
        viewrecords: true,
        caption: "Title",
        editurl: "myEditUrl"
    }).jqGrid("navGrid", "#pager");
});