I have a complex JSON feed containing various events with multiple dates and locations. Each date for an event includes latitude and longitude, which I use to calculate distance using HTML5 geolocation. My goal is to add this calculated distance to the child object and sort not only by distance but also organize events based on the distances of their individual dates.
Previously, I attempted to sort inline using v-for in Vue2, but I realized it does not work as expected and doesn't address the sorting of parent events. Below is an example of my current approach:
HTML:
<div id="string">
<p><strong>Current Geolocation:</strong> {{lat}}:{{lon}}</p>
<ol v-for="seminar in seminars">
<li>
{{seminar.title}}
<ul>
<li v-for="event in seminar.events">
{{event.webtitle}} <strong>{{calcDist(lat,lon,event.location.lat,event.location.lon,N)}} Miles Away</strong>
</li>
</ul>
</li>
</ol>
</div>
Methods:
methods: {
getLocation: function () {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(this.showPosition, this.errorCallback);
} else {
this.error = "Geolocation is not supported.";
}
},
showPosition: function (position) {
this.lat = position.coords.latitude;
this.lon = position.coords.longitude;
this.googleQuery(position.coords.latitude, position.coords.longitude);
},
calcDist: function (lat1, lon1, lat2, lon2, unit) {
if ((lat1 == lat2) && (lon1 == lon2)) {
return 0;
} else {
var radlat1 = Math.PI * lat1/180;
var radlat2 = Math.PI * lat2/180;
var theta = lon1-lon2;
var radtheta = Math.PI * theta/180;
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
if (dist > 1) {
dist = 1;
}
dist = Math.acos(dist);
dist = dist * 180/Math.PI;
dist = dist * 60 * 1.1515;
if (unit=="K") { dist = dist * 1.609344 }
if (unit=="N") { dist = dist * 0.8684 }
return Math.round(dist);
}
}
},
beforeMount() {
this.getLocation();
}
Check out this JSFiddle Example showcasing Data Structure and Progress So Far