So konvertieren Sie Daten von Firebase zu einem HTML-Array

Question

Ich möchte diese Daten (HTML-Array) durch die Daten aus meiner Firebase-Datenbank abrufen.

var locations = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 

hier ist, wie Datenbank wie

I want to put parkers on the location and set the other attributes as descriptions

mir jemand helfen kann, sieht, wie meine Daten von Feuerbasis zu einem HTML-Array wie der Code oben zu drehen.

warum die Verwendung von .on anstelle von .once die Tabelle beim Aktualisieren der Datenbank nicht aktualisiert.

rootRef.on("child_added", snap =>{ 
    var date = snap.child("dateAndTime").val(); 
    var lat = snap.child("latitude").val(); 
    var long = snap.child("longitude").val(); 
    var link = snap.child("link").val(); 
    var report = snap.child("report").val(); 
    var status = snap.child("status").val(); 
    var needs = snap.child("needs").val(); 


    $("#table_body").append("<tr><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>"); 

}); 

Answer 1

Fetching von Feuerbasis

gehe ich davon aus Feuerbasis Setup mit korrekten Einstellungen

// Default markers 
var locations = [{ 
    report: "Bondi Beach", 
    longitude: -33.890542, 
    latitude: 151.274856 
}, { 
    report: "Maroubra Beach", 
    longitude: -33.950598, 
    latitude: 151.274856 
}]; 

var colors = [ 
    "http://maps.google.com/mapfiles/ms/icons/red-dot.png", 
    "http://maps.google.com/mapfiles/ms/icons/green-dot.png" 
] 


var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: new google.maps.LatLng(-33.92, 151.25), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow(); 
var markers = [] 

// To dynamically change marker color, use marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 

function renderMarkers() { 

    // Clearout old markers 
    markers.map(function (oldMarker) { 
     oldMarker.setMap(null) 
    }) 
    markers = [] 

    locations.map(function (loc) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(loc.longitude, loc.latitude), 
      map: map, 
      icon: loc.completed ? colors[0] : colors[1] 
     }); 
     markers.push(marker) 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(loc.report); 
       infowindow.open(map, marker); 
      } 
     })(marker, loc)); 
    }) 
} 
renderMarkers() 


firebase.database.ref('/database/5-11-2017').on('value', function (snapshot) { 
    var result = snapshot.val() 

    if (!result) return 

    // I dont know you database, either it will return objects or array. 
    locations = Object.keys(result).map(function (key) { 
     return result[key] 
    }) 
    // or 
    // locations = result // Array 

    // Render makers with new locations 
    renderMarkers() 

}) 

Example Laden von Daten zu simulieren ist, ich habe Timeout-Funktion hinzugefügt. Die Karte sollte nach etwa 5 Sekunden neue Markierungen anzeigen.