如何使用打字稿创建新的 JSON 树？

Question

我正在尝试构建一个 Ionic (Angular) 地理定位跟踪器移动应用程序。位置跟踪已经很好用了。但现在我想将地理位置存储在路线中。目前，每个数据集（准确度、经度、纬度...）都将单独保存在 Firebase 实时数据库中。

有人知道怎么解决吗？

目标是有这样的结构：

-geolocations
    - routeId
        - trackingId
            - accuracy
            - long
            - lat
            - timeStamp
            - uId

旧结构如下所示：

tracking.page.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { GeolocationService } from '../../app/geolocation.service';
import { UserService } from '../../app/user.service';
import { Insomnia } from '@ionic-native/insomnia/ngx';
import { LoadingController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';
import { AppComponent } from '../app.component';
import { Storage } from '@ionic/storage';

declare var google;

@Component({
  selector: 'app-tracking',
  templateUrl: './tracking.page.html',
  styleUrls: ['./tracking.page.scss'],
})
export class TrackingPage implements OnInit {
  @ViewChild('map', { static: true }) mapElement: ElementRef;
  map: any;
  markers = [];
  geoLocations: any;

  watchLocationUpdates: any;
  isWatching: boolean;
  interval: any;

  geoLatitude: number;
  geoLongitude: number;
  geoAccuracy: number;
  timeStamp: any;
  uId: string;
  trackingId: string;

  constructor(
    private geolocation: Geolocation,
    public geolocationService: GeolocationService,
    public userService: UserService,
    private insomnia: Insomnia,
    public loadingCtrl: LoadingController,
    public alertController: AlertController,
    public appComponent: AppComponent,
    private storage: Storage
    ) {
  }

  ngOnInit() {
    document.addEventListener('deviceready', onDeviceReady, false);
    function onDeviceReady() {
        console.log('navigator.geolocation works well');
    }

    this.appComponent.isLoggedIn = true;

    this.loadMap();
      console.log('this.loadMap() called');
  }

  loadMap() {
    const latLng = new google.maps.LatLng(48.141558, 11.568210);
    const mapOptions = {
      center: latLng,
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl: false,
      zoomControl: false
    };
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }

  // Start location watch
  watchLocation() {
    this.loadingCtrl.create({
      message: 'Standort Tracking wird initialisiert...',
      duration: 5000,
    }).then((res) => {
      res.present();
    });
    const options = {
      maximumAge: 3000,
      timeout: 5000,
      enableHighAccuracy: true,
    };
    this.isWatching = true;
    this.insomnia.keepAwake()
    .then(
      () => console.log('this.insomnia.keepAwake(): success')
    );
    this.trackingId =  Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    this.interval = setInterval(() => {
      this.uId = this.userService.uId;
      if (this.appComponent.userName !== '') { // Makes sure that username is loaded from db
      this.watchLocationUpdates = this.geolocation.getCurrentPosition(options);
      this.watchLocationUpdates.then((resp) => {

        this.geoLocations = resp.coords;
        this.geoLatitude = resp.coords.latitude;
        this.geoLongitude = resp.coords.longitude;
        this.geoAccuracy = Math.trunc(resp.coords.accuracy);
        this.timeStamp = Date.now();

        this.geolocationService.insertUserGeolocation({
          trackingId: this.trackingId,
          latitude: this.geoLatitude,
          longitude: this.geoLongitude,
          accuracy: this.geoAccuracy,
          timeStamp: this.timeStamp,
          uId: this.uId
          }).subscribe((response) => {
            localStorage.setItem('lastLocation', JSON.stringify({
              trackingId: this.trackingId,
              latitude: this.geoLatitude,
              longitude: this.geoLongitude,
              accuracy: this.geoAccuracy,
              timeStamp: this.timeStamp,
              uId: this.uId
              }));
            console.log(`user location data inserted in FB`, {
              trackingId: this.trackingId,
              latitude: this.geoLatitude,
              longitude: this.geoLongitude,
              accuracy: this.geoAccuracy,
              timeStamp: this.timeStamp,
              uId: this.uId
              });
          });

        const position = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
        this.map.setCenter(position);
        this.map.setZoom(16);

        this.markers.map(marker => marker.setMap(null));
        this.markers = [];
        const latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
        const marker = new google.maps.Marker({
          map: this.map,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 13,
            fillColor: '#1CA0EC',
            fillOpacity: 1,
            strokeColor: 'white',
            strokeWeight: 2
          },
            position: latLng
        });
        this.markers.push(marker);
      });
      } else {
      this.stopLocationWatch();
      }
    }, 3000);
  }

  // Stop location watch
  stopLocationWatch() {
    this.isWatching = false;
    console.log('this.isWatching = ', this.isWatching);
    clearInterval(this.interval);
    console.log('this.interval', this.interval);
    // this.watchLocationUpdatesSub.unsubscribe();
    this.loadMap();
    this.locationStopAlert();
    this.insomnia.allowSleepAgain()
      .then(
       () => console.log('this.insomnia.allowSleepAgain(): success'),
    );
  }

  async locationStopAlert() {
    const alert = await this.alertController.create({
      header: 'Das Standort Tracking wurde beendet',
      // message: 'This is an alert message.',
      buttons: ['OK']
    });
    await alert.present();
  }
}

Answer 1

如果我理解正确，我为您制作的这段代码应该可以帮助您从旧格式转换为新格式。

const geolocations = {
  routeId1: [
    { trackingId: 1, timeStamp: 1, accuracy: 1, longitude: 1, latitude: 1, uId: 1 },
    { trackingId: 1, timeStamp: 2, accuracy: 2, longitude: 2, latitude: 2, uId: 2 },
    { trackingId: 2, timeStamp: 1, accuracy: 3, longitude: 3, latitude: 3, uId: 3 },
    { trackingId: 2, timeStamp: 2, accuracy: 4, longitude: 4, latitude: 4, uId: 4 }
  ],
  routeId2: [
    { trackingId: 3, timeStamp: 1, accuracy: 5, longitude: 5, latitude: 5, uId: 5 },
    { trackingId: 4, timeStamp: 1, accuracy: 6, longitude: 6, latitude: 6, uId: 6 },
    { trackingId: 4, timeStamp: 2, accuracy: 7, longitude: 7, latitude: 7, uId: 7 },
    { trackingId: 4, timeStamp: 3, accuracy: 8, longitude: 8, latitude: 8, uId: 8 }
  ]
};
const newGeolocations = {};
const routesIds = Object.keys(geolocations);
for (const routeId of routesIds) {
  const route= geolocations[routeId];
  if (!newGeolocations.hasOwnProperty(route)) {
    newGeolocations[routeId] = {}
  }
  for (const loc of route) {
    if (!newGeolocations[routeId].hasOwnProperty(loc.trackingId)) {
      newGeolocations[routeId][loc.trackingId] = []
    }
    newGeolocations[routeId][loc.trackingId].push({
      accuracy: loc.accuracy,
      longitude: loc.longitude,
      latitude: loc.latitude,
      timeStamp: loc.timeStamp,
      uId: loc.uId
    });
  }
}
console.log(JSON.stringify(newGeolocations));

这是我在控制台中得到的结果，

{
"routeId1":
    {"1":[
        {"accuracy":1,"longitude":1,"latitude":1,"timeStamp":1,"uId":1},
        {"accuracy":2,"longitude":2,"latitude":2,"timeStamp":2,"uId":2}
    ],
    "2":[
        {"accuracy":3,"longitude":3,"latitude":3,"timeStamp":1,"uId":3},
        {"accuracy":4,"longitude":4,"latitude":4,"timeStamp":2,"uId":4}
    ]},
"routeId2":{
    "3":[
        {"accuracy":5,"longitude":5,"latitude":5,"timeStamp":1,"uId":5}
    ],
    "4":[
        {"accuracy":6,"longitude":6,"latitude":6,"timeStamp":1,"uId":6},
        {"accuracy":7,"longitude":7,"latitude":7,"timeStamp":2,"uId":7},
        {"accuracy":8,"longitude":8,"latitude":8,"timeStamp":3,"uId":8}
    ]}
}

如果对你有帮助，请告诉我。