Filter List of Citys by driving Distance-CodePudding

I'm not really new to HTML, Java and so on, but last time I coded is years ago.

I have the following list of German cities and I want to filter them by the driving distance in km. I only want to show cities that are closer than 75 km or exactly 75 km to my “main position”. I would do it manually, but this is not the only list I have to filter.

"Bad Eilsen, Buchholz, Hannover, Heeßen, Luhden, Samtgemeinde Lindhorst, Beckedorf, Heuerßen, Berlin, Lindhorst, Lüdersfeld, Samtgemeinde Nenndorf, Bad Nenndorf, Haste, Kassel, Hohnhorst, Suthfeld, Samtgemeinde Niedernwöhren, Lauenhagen, Meerbeck, Dortmund, Niedernwöhren, Nordsehl, Pollhagen, Wiedensahl, Samtgemeinde Nienstädt, Helpsen, Hespe, Frankfurt, Nienstädt, Freiburg, Seggebruch, Potsdam"

I thought about using the website "www.luftlinie.org" as my filter. When I give it two locations, it outputs the distance in km inside a span called "value". I started looking for the URL, which I can use to get the outputs when inserting city names. It is: "https://www.luftlinie.org/Hameln,Niedersachsen,DEU/"cityname",Niedersachsen,DEU/"

My challenges to do now:

Put the list of cities into variables.
Use the var to put them into the filter URL
Check if the span “value” is lower than 75 km or equal to 75 km.
If positive, display the name in a simple list, else do not display

Back in the day this would not be a problem for me, I used php and javascript jquery but today it is really hard to understand and all scripts I tried did not even show anything. Here is an example I tried it with....

<script>

$.get('https://www.luftlinie.org/Hameln,Niedersachsen,DEU/berlin, niedersachsen').then(function (html) {
    // Success response
    var $mainbar = $(html).find('#rt');
    document.write($mainbar.html());
}, function () {
    // Error response
    document.write('Access denied');
});
</script>

Would be great if someone could help me with that part, as I spent half of the day already on that...

CodePudding user response：

What Will Jenkins said is generally true, but I checked out the website itself, and the "API" link in the bottom right corner forwards to docs.distance.to/api. So instead of going through all that work of manually scraping another website, why not use the underlying API? Then the CORS issues should be solved, and it's much faster & efficient. Only disadvantage is that you need to register at Rapid API, IIRC they have a pretty generous free tier. Good luck!

CodePudding user response：

You can't get webpages cross-domain using client-side code like jQuery - browsers won't allow it (see here for some background on same-origin policy). You'll either have to use a server-side solution in e.g. Node or Java, or access the data you want via an API.

It looks like they offer an API here that might suit your needs.