How to parse data from GeoJSON into in the grid ? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, data, data source, geojson, grid, jquery grid, jqxgrid, json, map, parse

This topic contains 4 replies, has 2 voices, and was last updated by akanis 9 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

How to parse data from GeoJSON into in the grid ? Posts

August 19, 2015 at 9:01 pm How to parse data from GeoJSON into in the grid ? #74966

akanis

Participant

Hi, there is a example bindingtojson.htm. With GeoJSON this function in the example does not work.

$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
columnsresize: true,
columns: [
{ text: ‘Reihe’, datafield: ‘REIHE’, width: 250 },
{ text: ‘Grab_NR’, datafield: ‘GRAB_NR’, width: 180 },
]
});

Is there a simple way to use GeoJSON like the following structure-example of my GeoJSON file ?
Only datafield: ‘type’ is accepted and listed as Feature.

},
{
“type”: “Feature”,
“geometry”: {
“type”: “Polygon”,
“coordinates”: [
[
[
13.8675288378074,
50.9855085081436
],
[
13.8674912568494,
50.9855340893233
],
[
13.8675074856065,
50.9855435875696
],
[
13.8675450648109,
50.985518005244
],
[
13.8675288378074,
50.9855085081436
]
]
]
},
“properties”: {
“OBJECTID”: 1275,
“REIHE”: “02”,
“ABTEILUNG”: “11”,
“BEMERKUNG”: “”,
“GRAB_NR”: “12”,
“SHAPE_LENG”: 10.8709941667,
“SHAPE_AREA”: 6.03210741128,
“GISID”: “110212”
}
},
{
“type”: “Feature”,
“geometry”: {

August 20, 2015 at 5:21 am How to parse data from GeoJSON into in the grid ? #74972

Dimitar

Participant

Hi akanis,

Here is an example (note the source property root). In your case, change localdata with the url to GeoJSON.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                13.8675288378074,
                                50.9855085081436
                            ],
                            [
                                13.8674912568494,
                                50.9855340893233
                            ],
                            [
                                13.8675074856065,
                                50.9855435875696
                            ],
                            [
                                13.8675450648109,
                                50.985518005244
                            ],
                            [
                                13.8675288378074,
                                50.9855085081436
                            ]
                        ]
                    ]
                },
                "properties": {
                    "OBJECTID": 1275,
                    "REIHE": "02",
                    "ABTEILUNG": "11",
                    "BEMERKUNG": "",
                    "GRAB_NR": "12",
                    "SHAPE_LENG": 10.8709941667,
                    "SHAPE_AREA": 6.03210741128,
                    "GISID": "110212"
                }
            };

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'REIHE', type: 'string' },
                    { name: 'GRAB_NR', type: 'int' }
                ],
                id: 'OBJECTID',
                root: 'properties',
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid({
                width: 850,
                source: dataAdapter,
                columnsresize: true,
                columns: [{
                    text: 'Reihe',
                    datafield: 'REIHE',
                    width: 250
                }, {
                    text: 'Grab_NR',
                    datafield: 'GRAB_NR',
                    width: 180
                }]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 20, 2015 at 7:23 am How to parse data from GeoJSON into in the grid ? #74976

akanis

Participant

Hi Dimitar,

the header of my geojson data is different from your example:

{
“type”: “FeatureCollection”,

“features”: [
{ “type”: “Feature”, “properties”: { “fid”: “UID.1”, “OBJECTID”: 1, “REIHE”: “01”, “ABTEILUNG”: “Rand”, “GRAB_NR”: “100”, “SHAPE_LENG”: “11,6187283579”, “SHAPE_AREA”: “7,98523561838”, “GISID”: “Rand01100”, “BEMERKUNG”: null }, “geometry”: { “type”: “Polygon”, “coordinates”: [ [ [ 13.8681817804713, 50.985484635788701 ], [ 13.868219243870501, 50.9855065009504 ], [ 13.8682408796217, 50.985491739928797 ], [ 13.868203455525601, 50.985470015612201 ], [ 13.8681817804713, 50.985484635788701 ] ] ] } },
{ “type”: “Feature”, “properties”: { “fid”: “UID.2”, “OBJECTID”: 2, “REIHE”: “01”, “ABTEILUNG”: “Rand”, “GRAB_NR”: “79-80”, “SHAPE_LENG”: “12,918410117”, “SHAPE_AREA”: “10,3290563594”, “GISID”: “Rand0179-80”, “BEMERKUNG”: null }, “geometry”: { “type”: “Polygon”, “coordinates”: [ [ [ 13.868263700 …

the grid contains no data; i think, root: `properties’ is not correct ? my code:

$(document).ready(function () {
var url = “../sampledata/Fri.json”;

// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘REIHE’, type: ‘string’ },
{ name: ‘GRAB_NR’, type: ‘int’ }
],
id: ‘OBJECTID’,
root: ‘properties’,
url: url
//localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid({
width: 850,
source: dataAdapter,
columnsresize: true,
columns: [{
text: ‘Reihe’,
datafield: ‘REIHE’,
width: 250
}, {
text: ‘Grab_NR’,
datafield: ‘GRAB_NR’,
width: 180
}]
});
});

best regards akanis

August 20, 2015 at 7:40 am How to parse data from GeoJSON into in the grid ? #74978

Dimitar

Participant

Hi akanis,

I used your data in my example. Here is another example with your new data:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "properties": {
                        "fid": "UID.1",
                        "OBJECTID": 1,
                        "REIHE": "01",
                        "ABTEILUNG": "Rand",
                        "GRAB_NR": "100",
                        "SHAPE_LENG": "11,6187283579",
                        "SHAPE_AREA": "7,98523561838",
                        "GISID": "Rand01100",
                        "BEMERKUNG": null
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    13.8681817804713,
                                    50.9854846357887
                                ],
                                [
                                    13.8682192438705,
                                    50.9855065009504
                                ],
                                [
                                    13.8682408796217,
                                    50.9854917399288
                                ],
                                [
                                    13.8682034555256,
                                    50.9854700156122
                                ],
                                [
                                    13.8681817804713,
                                    50.9854846357887
                                ]
                            ]
                        ]
                    }
                }]
            };

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'REIHE', type: 'string', map: 'properties>REIHE' },
                    { name: 'GRAB_NR', type: 'int', map: 'properties>GRAB_NR' }
                ],
                id: 'properties>OBJECTID',
                root: 'features',
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid({
                width: 850,
                source: dataAdapter,
                columnsresize: true,
                columns: [{
                    text: 'Reihe',
                    datafield: 'REIHE',
                    width: 250
                }, {
                    text: 'Grab_NR',
                    datafield: 'GRAB_NR',
                    width: 180
                }]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 20, 2015 at 10:47 am How to parse data from GeoJSON into in the grid ? #74988

akanis

Participant

Hi Dimitar,

… map: ‘properties>REIHE was the base for success.
Thank you, best regards akanis

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.