Get JSON data from WFS/Geoserver

Question

I am struggling with getting data from WFS in my GeoServer. I want to get specific properties from the JSON returned by WFS and use it in my html page filling a table. I have read lots of posts and documentation but I can't seem to make it work. I have:

(a) changed the web.inf file in my geoserver folder to enable jsonp

(b) tried combinations of outputFormat (json or text/javascript)

(c) tried different ways to parse the JSON (use . or [], JSON.parse or parseJSON etc),

(d) used JSON.stringify to test whether the ajax call works correctly (it does!!)

but, in the end, it always returns undefined!!

function wfs(longitude, latitude){
    function getJson(data) {
        var myVar1=data['avgtemp1'];
        document.getElementById("v1").innerHTML = myVar;
    }
    var JsonUrl = "http://88.99.13.199:8080/geoserver/agristats/wfs?service=wfs&version=2.0.0&request=GetFeature&typeNames=agristats:beekeeping&cql_filter=INTERSECTS(geom,POINT(" + longitude + " " + latitude + "))&outputFormat=text/javascript&format_options=callback:getJson";
    $.ajax({
        type: 'GET', 
        url: JsonUrl,
        dataType: 'jsonp',
        jsonpCallback:'getJson',
        success: getJson
    });
}
wfs(38, 23);

Could you please help me?

Answer 1

You are close to it. First, you have a typo in the variable name you are writing (myVar1 vs myVar). Secondly, your function is receiving a Json object, so you must dive into its structure. First you get the features, then the 1st one, then the property array, then the property of your choice. I suggest you read a tutorial on Json Objects, as you will surely want to loop through properties/items, validate they are not null etc.

 function getJson(data) {
        var myVar1=data.features[0].properties['avgtemp1'];
        document.getElementById("v1").innerHTML = myVar1;
    }

At last, don't forget to use the debugger in your favorite browser. put a breakpoint in your function and check the structure and content of data.