Liste
Koden under kobler seg til firebase og henter verdier fra en tabell (tabellen har navnet kunde ).
Husk at du må skifte ut var config = { } med kode som du henter fra din egen firebase (se kobling)
function setup() {
// Initialize Firebase
var config = {
apiKey: "AIzaSyBsSmSbBvjGwUKapak-USd6oUBnkoVE0ls",
authDomain: "civz-7871d.firebaseapp.com",
databaseURL: "https://civz-7871d.firebaseio.com",
projectId: "civz-7871d",
storageBucket: "civz-7871d.appspot.com",
messagingSenderId: "324948067446"
};
firebase.initializeApp(config);
let divListe = document.getElementById("liste");
let ref = firebase.database().ref("kunde");
function visKunder(snapshot) {
let kundenr = snapshot.key;
let info = snapshot.val();
divListe.innerHTML += `
<div>
<h4>Kunde nr ${kundenr}</h4>
<ul>
<li>${info.fornavn} ${info.etternavn}
<li>Epost : ${info.epost}
<li>Mobil ${info.mobil}
</ul>
</div>
`;
}
ref.on("child_added", visKunder);
}
Kommandoen under kobler seg til tabellen kunde i databasen.
let ref = firebase.database().ref("kunde");
Dersom du har en tabell som ligger inne i en annen (se under: ski ligger inne i vinterutstyr) må du skrive hele stien.
let ref = firebase.database().ref("vinterutstyr/ski");
{
"kunde": {
"12333": {
"fornavn":"ole",
"etternavn":"olsen",
"epost":"[email protected]",
"mobil":"12121212"
},
"12334": {
"fornavn":"anne",
"etternavn":"olsen",
"epost":"[email protected]",
"mobil":"12124566"
}
},
"vinterutstyr" : {
"ski" : {
"ski102": {
"navn" : "aasnes 122",
"pris" : "2500"
},
"ski103": {
"navn" : "aasnes 123",
"pris" : "1500"
}
}
"staver" : {
}
},
"sommerutstyr" : {
}
}
I funksjonen visKunder bruker vi let kundenr = snapshot.key;
til å få tak i nøkkelfeltet i tabellen.
Vi bruker let info = snapshot.val();
til å få tak i alle feltene i tabellen.
Dersom du bruker dette eksemplet på en annen tabell må du tilpasse ref("kunde") slik at du skriver inn navnet på din tabell.
Du må også endre kundenr og info.etternavn og de andre slik at de stemmer med feltnavnene i din tabell.
Den siste kommandoen ref.on("child_added", visKunder);
sørger for at Firebase vil vise alle nye kunder i
html-elementet liste (divListe i koden). Ved oppstart vises også eksisterende kunder.