How to convert data from firebase to an html array - html

Question

i want to replace this data(html array) with the retrieve data from my firebase database.
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]
here is how database looks like
I want to put parkers on the location and set the other attributes as descriptions
can someone help me how to turn my data from firebase to an html array like the code above.
why using .on rather than .once does not update the table when updating the database.
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 from firebase
I assume firebase is setup with correct settings
// 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
To simulate loading of data, I have added timeout function. Map should render new markers after about 5 seconds.