CODEWITHSUNDEEP
javascriptjsongeoservertabulator
John Deligiannis
John Deligiannis

Reputation: 53

Geoserver JSON to Tabulator

I am working on OpenLayers and Geoserver. When a user click a feature, I have an already created tabulator table to fetch feature info data. My problem is that I need to convert the html response from Geoserver to JSON. How can I do that?

This is the response from Geoserver

<table class="featureInfo">
  <caption class="featureInfo">l1Data</caption>
  <tbody><tr>
    <th>id</th>
    <th>sensor</th>
    <th>timestamp</th>
    <th>reliability</th>
  </tr>

  <tr>
    <td>16021</td>
    <td>Basic</td>
    <td>Sep 18, 2020 12:05:02 PM</td>
    <td>0.929717403858748</td>
  </tr>
</tbody>
</table>

the Tabulator has been set as:

table = new Tabulator("#eventtable", {
    //height:"311px",
    layout:"fitColumns",
    columns:[
    {title:"ID", field:"id", visible:false},
    {title:"Sensor", field:"sensor", sorter:"string"},
    {title:"Last Detection", field:"timestamp", sorter:"date"},
    {title:"Reliability", field:"reliability", sorter:"number"},
    ],
  });

EDITED I found that I can have an application/json response, but I can not put in Tabulator. The code on map click:

map.on('singleclick', function (evt) {
var viewResolution = /** @type {number} */ (view.getResolution());
    var url = wmsSource.getFeatureInfoUrl(
      evt.coordinate, viewResolution, 'EPSG:3857',
      { 'INFO_FORMAT': 'application/json' });
    if (url) {
      fetch(url)

        .then(function (response) { return response.text(); })
        .then(function (html) {
          var test1 = JSON.parse(html);
          var test2 = test1.features[0].properties;
          table.setData(test2);
        });
    }
  });

The error is:

tabulator.min.js:2 Data Loading Error - Unable to process data due to invalid data type 
Expecting: array 
Received:  object

Upvotes: 0

Views: 189

Answers (1)

Ian Turton
Ian Turton

Reputation: 10976

You don't need to work out how to convert it, simply ask GeoServer to return you the information as JSON. You can do that by setting the info_format parameter to application/json. The GeoServer manual gives full details of all the possible parameters and formats that can be used to control the response.

Upvotes: 2

Related Questions