如何将数据从firebase转换为html数组

Question

我想用从我的 firebase 数据库中检索到的数据替换这个数据（html 数组）。

    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]

这是数据库的样子

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

有人可以帮我如何将我的数据从 firebase 转换为 html 数组，如上面的代码。

为什么在更新数据库时使用 .on 而不是 .once 不会更新表。

    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

从 Firebase 获取

我假设 firebase 设置正确

// 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 为了模拟数据的加载，我添加了超时功能。地图应该会在大约 5 秒后呈现新的标记。