Load geojson data to HTML table

SFF

I'm using leafletjs map where I fetch two URL's that then draw circles in the map.
Also I added datpicker to show data based on range.
Now I would like that data which shows on the map based on date range also show beside the map in the table.
I have tried examples from this page but none of them shows anything in the table.

My code fetch URL in geojson

var FEED1 = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson';

Then here goes code which format circles on the map and below is code that fetch above FEED1 geojson

fetch(FEED1, {
        method:'GET'
      })
      .then(r => r.json())
      .then(json => {
        console.log(json);
        earthquakes.addData(json);
      });

Please can you advise how to create table based on above_
Thanks

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SFF

Thank you please check this

http://live.datatables.net/vabotoga/1/edit?html,js,console

I will update ajax url to FEED1 I mentioned at begining.

As you can see I tried and changed "data" to "features" as that s in geojson, then use "properties.mag" for example to pull that data and so on for others.

If I download geojson and point to that file then replace "feature" word with "data" it loads data but problem is as soon as I change word data to anything else it fails.
Also in this geojson line there are Type, metadata etc.

{"type":"FeatureCollection","metadata":{"totalCount":817},"features":[{

kthorngren

Your test case as an ajax error. This is the response from the server:

Error 400: Unknown query parameter: _
Request:
/fdsnws/event/1/query?starttime=2020-03-22&endtime=2020-08-23&minlatitude=42.12&maxlatitude=44.14&minlongitude=9.90&maxlongitude=14.47&format=json&_=1623433030423

You need to use columns.data to define the object structure. Use the ajax.dataSrc to point Datatables to an alternate data location (features).

I changed the URL to use the one in your original post and added ajax.dataSrc now this error is occurring:

DataTables warning: table id=example - Requested unknown parameter 'properties.magtype' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

You have { "data": "properties.magtype" }. The names are case sensitive. I changed the example to use { "data": "properties.magType" }.

Now this error:

DataTables warning: table id=example - Requested unknown parameter 'properties.lon' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

properties.lon and some of the others you defined don't see to exist in the data. Maybe this exists in the URL you want to use but it sounds like you need to fix one or more of the parameters being sent.

Updated example:
http://live.datatables.net/xewerara/1/edit

Kevin

SFF

Thank you.
In my live example my original link is used.
Please check this.
http://live.datatables.net/xewerara/1/edit?html,css,js,console

kthorngren

Not sure if you are asking a question or still having problems.

Kevin

SFF

Hi
still doesn't work. as per my example bellow.
http://live.datatables.net/xewerara/1/edit?html,css,js,console
I placed URL that I'm using and there is an error.
Checked case sensitive and other things but..

kthorngren

I placed URL that I'm using and there is an error.

What is the URL?

What is the error?

Can you update the test case to show the error?

Kevin

SFF

Hi Kevin,

thank you for your effort.
It works if I save json locally and for ajax url set that local gjson file but via the URL it doesnt load.

Error is http://datatables.net/tn/7

here is the test
http://live.datatables.net/xewerara/6/edit?html,css,js,console,output

kthorngren

Web browser's won't allow for local file access via Ajax. See this thread for more details.

It works if I save json locally and for ajax url set that local gjson file

How are you fetching the json to save locally?

Can you update the test case with the URL you want to use?

Kevin

SFF

I open link which is FDSNWS with json format and just save it.
So when I load that file with ajax url it works but when I use full link then it provide an error I mentioned earlier.
I have updated that url in test example bellow.
Check this please.
http://live.datatables.net/xewerara/7/edit?html,css,js,console,output

kthorngren

Use the browser's network inspector to see what is returned and you will see this error:

Error 400: Unknown query parameter: _

Seems like the server doesn't like the cache option of _=1623530. You can use cache: true to remove this option from the URL. See the jQuery ajax()](https://api.jquery.com/jquery.ajax/) docs for more details.

You can use the ajax.data option as a function to dynamically build the parameters sent. See the example in the docs and this running example. I updated the example to show both of these changes:
http://live.datatables.net/xewerara/8/edit

For simplicity I kept the starttime, endtime and format parameters.

Kevin

SFF

Thank you so much this solved this problem.
I have another one to solve as I fetch two urls in my code but I will try to solve it by myself as I saw some examples but not sure if it will work for me.