JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<ul id="groups"></ul>

JavaScript

var jsonString =
    '{"City A":{"Position":{"Longitude":9.96233,"Latitude":49.80404}},"City B":{"Position":{"Longitude":6.11499,"Latitude":50.76891}},"City C":{"Position":{"Longitude":6.80592,"Latitude":51.53548}},"City D":{"Position":{"Longitude":9.50523,"Latitude":51.31991}},"City E":{"Position":{"Longitude":9.66089,"Latitude":48.70158}},"City F":{"Position":{"Longitude":9.93368,"Latitude":53.55608}},"City G":{"Position":{"Longitude":11.56122,"Latitude":48.14496}},"City H":{"Position":{"Longitude":13.34253,"Latitude":52.5319}},"City I":{"Position":{"Longitude":6.11327,"Latitude":50.77715}},"City J":{"Position":{"Longitude":13.36671,"Latitude":52.54344}}}';

var myData = JSON.parse(jsonString);
$(document).ready(function () {
    
    var myList = [];
    $.each(myData, function (a, b) {
        myData[a].distance = hesapla(12.9279,77.6271, b.Position.Longitude, b.Position.Latitude);
        myData[a].name = a;
        myList.push(myData[a])
    });

    myList.sort(function(a,b){
        return a.distance - b.distance;
    });

    $.each(myList, function (i) {    
        $("#groups").append('<li><h2>' + myList[i].name + '</h2><p>' + schoneStrecke(myList[i].distance) + '</p></a></li>');

    });


    function hesapla(meineLongitude, meineLatitude, long1, lat1) {
        erdRadius = 6371;

        meineLongitude = meineLongitude * (Math.PI / 180);
        meineLatitude = meineLatitude * (Math.PI / 180);
        long1 = long1 * (Math.PI / 180);
        lat1 = lat1 * (Math.PI / 180);

        x0 = meineLongitude * erdRadius * Math.cos(meineLatitude);
        y0 = meineLatitude * erdRadius;

        x1 = long1 * erdRadius * Math.cos(lat1);
        y1 = lat1 * erdRadius;

        dx = x0 - x1;
        dy = y0 - y1;

        d = Math.sqrt((dx * dx) + (dy * dy));
        return d;
    }
    function schoneStrecke(d){
        if (d < 1) {
            return Math.round(d * 1000) +" m";
        } else {
            return Math.round(d * 10) / 10 +" km";
        }
   ...