jqGrid JSON Mapping Error

Question

When using jqGrid and JSON server responses, I seem to be having a problem getting my JSON mapping correct.

For example, my server response looks like this:

[
     {ID: 'cmp1', Name: 'Name1', Address: 'Address1', Phone: 'Phone1', Agent: 'Agent1', last_trx: 'last_trx1'}, 
     {ID: 'cmp2', Name: 'Name2', Address: 'Address2', Phone: 'Phone2', Agent: 'Agent2', last_trx: 'last_trx2'}
]

and my jqGrid settings look like this (local datatype and local dataset used for testing):

    var grid = $('#grid_id');
    grid.jqGrid({
        datatype: 'local',
        colNames: ['ID', 'Company Name', 'Location', 'Phone', 'Agent', 'Last Load'], 
        colModel: [
            {name: 'ID', index: 'ID', jsonmap: 'ID', width: 75}, 
            {name: 'Company Name', index: 'Name', jsonmap: 'Name', width: 150}, 
            {name: 'Location', index: 'Address', jsonmap: 'Address', width: 150}, 
            {name: 'Phone', index: 'Phone', jsonmap: 'Phone', width: 125, align: 'center'}, 
            {name: 'Agent', index: 'Agent', jsonmap: 'Agent', width: 150}, 
            {name: 'Last Load', index: 'last_trx', jsonmap: 'last_trx', width: 150}
        ], 
        loadonce: true, 
        shrinkToFit: false, 
        width: 600, 
        rowNum: 20, 
        rowList: [10, 20, 30, 40, 50, 100], 
        repeatitems: false, 
        jsonReader: { repeatitems: false, id: '0' }, 
        pager: '#companies_pager', 
        caption: 'Company List', 
        data: [
            {ID: 'cmp1', Name: 'Name1', Address: 'Address1', Phone: 'Phone1', Agent: 'Agent1', last_trx: 'last_trx1'}, 
            {ID: 'cmp2', Name: 'Name2', Address: 'Address2', Phone: 'Phone2', Agent: 'Agent2', last_trx: 'last_trx2'}
        ]
    });

ID, Phone, and Agent all show up (as their datasource names are exactly the same). However, Company Name, Location, and Last Load are all not being displayed. I thought that using jsonmap along with jsonReader: { repeatitems: false} allowed you to have different names for your JSON object than your colNames object.

All help would be greatly appreciated.

UPDATE Sorry for the late update. This is how the code will look out of testing. _data.rows is an array of JSON objects.

var noRecords = $('<div>No results for the entered company name.</div>');
        grid.jqGrid({
            datatype: 'local',
            colNames: ['ID', 'Company Name', 'Location', 'Phone', 'Agent', 'Last Load'], 
            colModel: [
                {name: 'ID', jsonmap: 'ID', width: 75}, 
                {name: 'Company Name', jsonmap: 'Name', width: 150}, 
                {name: 'Location', jsonmap: 'Address', width: 150}, 
                {name: 'Phone', jsonmap: 'Phone', width: 125, align: 'center'}, 
                {name: 'Agent', jsonmap: 'Agent', width: 150}, 
                {name: 'Last Load', jsonmap: 'last_trx', width: 150}
            ], 
            loadonce: true, 
            shrinkToFit: false, 
            width: 600, 
            rowNum: 20, 
            rowList: [10, 20, 30, 40, 50, 100], 
            repeatitems: false, 
            jsonReader: { repeatitems: false, id: '0' }, 
            pager: '#companies_pager', 
            caption: 'Company List', 
            loadComplete: function() {
                if(grid[0].p.reccount === 0) {
                    noRecords.show();
                }
                else {
                    noRecords.hide();
                }
            }
        });
/* Get the list of companies based on the search criteria */
function getCompanies() {
    var company = document.getElementById('company').value;
    if((company != '') && (company != oldCompany)) {
        oldCompany = company;
        myAjax('get', {method: 'getCompanies', a: 'companies', data: company}, callbackGetCompanies);
    }
}
/* Parse the server response */
function callbackGetCompanies(_data) {
    if(_data && _data.message) {
        if(_data.message == 'true') {
            grid.jqGrid('clearGridData').jqGrid('setGridParam', {data: _data.rows, page: 1}).trigger('reloadGrid');
        }
        else {
            dialog(_data.message);
        }
    }
    else {
        serverError();
    }
}

Answer 1

You have more as one problem in the demo.

1. If you use datatype: 'local' the input data from the data parameter will be managed by localReader and not jsonReader. The value of repeatitems of localReader is by the way already false. So correct will be to use localReader: { id: 'ID' }.
2. If you use datatype: 'local' the loadonce: true option will be ignored because the data will be already local and should not be loaded once from the server.
3. If you use datatype: 'local' the jsonmap will be ignored. The property will be used only in case of datatype: 'json' or datatype: 'jsonstring'.
4. If you use datatype: 'local' the value of index property have to be the same as the value of name property. Only in the case the local sorting will work correctly.
5. You should not use spaces ' ' inside of name property. No meta-characters can be inside of name property.

So you have to use name to the name of the property in the data array:

colModel: [
    {name: 'ID', index: 'ID', width: 75},
    {name: 'Name', index: 'Name', width: 150},
    {name: 'Address', index: 'Address', width: 150},
    {name: 'Phone', index: 'Phone', width: 125, align: 'center'},
    {name: 'Agent', index: 'Agent', width: 150},
    {name: 'last_trx', index: 'last_trx', width: 150}
],
localReader: { id: 'ID' },

I see no reason why you should need to have name property other as in the input data.