Question

I have a PHP script that extract valid GeoJSON data from a database. Now I would like to prepare a grid view of these data with jqgrid, but I can’t figure out the proper jsonReader for the javascript code.

This is my GeoJSON output:

{"type":"FeatureCollection",
"total":0, 
"page":1, 
"records":117, 
"features":[
     {"geometry":{"type":"Point","coordinates":[12.3,41.70052]},
      "type":"Feature",
      "properties":{
      "data":"2006-02-22",
      "specie":"S. coeruleoalba",
      "localita":"Ostia",
      "provincia":"Roma"
     },"id":0},
    {"geometry":{
     "type":"Point","coordinates":[15.26667,40.0502]},
     "type":"Feature",
     "properties":{
        "data":"2006-03-01",
        "specie":"S. coeruleoalba",
        "localita":"Golfo di Salerno",
        "provincia":"Salerno"
     },"id":1},
    {"geometry":{"type":"Point","coordinates":[14.88333,40.56692]},
     "type":"Feature",
     "properties":{
        "data":"2006-03-03",
        "specie":"S. coeruleoalba",
        "localita":"Battipaglia",
        "provincia":"Salerno"
    },"id":2}

]}

Using this reader my grid shows the right number of rows (117) and pages, but empty cells

jsonReader : { 
    root: "features", 
    page: "page", 
    total: "total", 
    records: "records", 
    repeatitems: false, 
    cell: "properties", 
    id: "id"
}

Can someone help me to write a working reader? Thanks in advance

Answer 1

Your main error is that you try to use cell: "properties", but cell property will be ignored in case of usage of repeatitems: false property.

You should just use

jsonReader: {
    root: "features",
    repeatitems: false
}

and then define jsonmap property for every column. For example you can use the following column definition:

colModel: [
    {name: 'coordX', jsonmap:'geometry.coordinates.0', width: 75, sorttype: 'number',
        formatter: 'number', formatoptions: {decimalPlaces: 5}},
    {name: 'coordY', jsonmap:'geometry.coordinates.1', width: 75, sorttype: 'number',
        formatter: 'number', formatoptions: {decimalPlaces: 5}},
    {name: 'data', jsonmap:'properties.data', width: 90, align: 'center',
        sorttype: 'date', datefmt: 'm/d/Y',
        formatter: 'date', formatoptions: {newformat: 'm/d/Y'}},
    {name: 'specie', jsonmap:'properties.specie', width: 100},
    {name: 'localita', jsonmap:'properties.localita', width: 100},
    {name: 'provincia', jsonmap:'properties.provincia', width: 80}
]

As the result you will be able to read your JSON data to the following grid:

(see the demo here). In your JSON data I changed only total value from 0 to 1 because it has no sense to have the total value less as the page value.