Как передать вычисленное значение в многомерный объект JSON и отсортировать родительские и дочерние объекты Vue.JS - PullRequest
Новая
       13

Как передать вычисленное значение в многомерный объект JSON и отсортировать родительские и дочерние объекты Vue.JS

0 голосов
/ 16 мая 2019

У меня есть многомерный поток отдельных событий в формате JSON, каждый из которых имеет разные даты и места.Каждая дата в указанном событии включает в себя широту и долготу, которые я вычисляю, используя геолокацию HTML5.Я хочу вставить это расстояние в дочерний объект и сортировать не только по расстоянию, но и сортировать события по расстоянию каждой даты, сохраняемой в сгруппированном виде.

Я пробовал сортировать в строке, используя v-for, но у меня естьтак как узнал, что это не работает в vue2 и не решает проблему сортировки родительских событий.Ниже приведен пример того, над чем я работаю:

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: {
    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();
  }

Пример JSFiddle со структурой данныхи текущий прогресс

1 Ответ

0 голосов
/ 16 мая 2019

Это похоже на идеальный вариант использования вычисляемых свойств.Я не совсем понимаю некоторые детали вопроса (например, на каком основании следует сортировать семинары?), Но общий подход, приведенный ниже, должен работать.Для ясности он использует несколько вычисляемых свойств, но при желании их можно объединить. 

computed: {
    seminarsWithDistance() {
        return this.seminars.forEach(seminar => {
            seminar.events.forEach(event => {
                event.distance = calcDist(/*...*/);
            });
        });
    },
    seminarsWithSortedEvents() {
        return this.seminarsWithDistance.forEach(seminar => {
            seminar.events.sort((a, b) => a.distance - b.distance);
        });
    },
    sortedSeminars() {
        return this.seminarsWithSortedEvents.sort((a, b) => {
            /* some compare function for two seminars a and b */
        });
    }
}

Тогда это просто вопрос использования вычисленного свойства в шаблоне 

<ol v-for="seminar in sortedSeminars">
...