Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi everyone,

How to make a button by contacting Firebase Firestore in collection (e.g. "coll1"), from that collection to use all documents with fields "name" and "link", and to put field "name" into name of the button, and field "link" to link when click the button.

button is likely that:
HTML
<a href="somelink.com" class="button" target="_blank">some text</a>


Any help?

What I have tried:

JavaScript
  const firebaseConfig = {
    apiKey: "myAuthKey",
    authDomain: "myAuthDomain",
    projectId: "myProjectId",
    storageBucket: "myStorageBucket",
    messagingSenderId: "myMessaginigSenderId",
    appId: "myAppId"
  };
  firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore();
  db.settings({timestampsInSnapshots: true});

document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');

const listaSkeniranih = document.querySelector('#lista')

function renderList(doc){
	let li = document.createElement('li');
	let li1 = document.createElement('li');
	let li2 = document.createElement('li');
	let li3 = document.createElement('li');
	let li4 = document.createElement('li');
	let li5 = document.createElement('li');
	let li6 = document.createElement('li');
	let li7 = document.createElement('li');
	let imeproizvoda = document.createElement('span');
	let imekompanije = document.createElement('span');
	let pib = document.createElement('span');
	let eracun = document.createElement('span');
	let kolicina = document.createElement('span');
	let cena = document.createElement('span');
	let kod = document.createElement('span');
	let linija = document.createElement('span');
	
	li.setAttribute('data-id', doc.id);
	imekompanije.textContent = "Ime kompanije: " + doc.data().ime_kompanije + " ";
	imeproizvoda.textContent = "Ime proizvoda: " + doc.data().ime_proizvoda + " ";
	pib.textContent = "PIB firme: " + doc.data().pib + " ";
	eracun.textContent = "E-racun: " + doc.data().eracuncode + " ";
	kolicina.textContent = "Kolicina: " + doc.data().kolicina + " ";
	cena.textContent = "Cena: " + doc.data().cena + " ";
	kod.textContent = "ucUQVC: " + doc.data().ucUQVC + " ";
	linija.textContent = "___________________________";
	
	li.appendChild(imeproizvoda);
	li1.appendChild(imekompanije);
	li2.appendChild(pib);
	li3.appendChild(eracun);
	li4.appendChild(kolicina);
	li5.appendChild(cena);
	li6.appendChild(kod);
	li7.appendChild(linija);
	
	listaSkeniranih.appendChild(li);
	listaSkeniranih.appendChild(li1);
	listaSkeniranih.appendChild(li2);
	listaSkeniranih.appendChild(li3);
	listaSkeniranih.appendChild(li4);
	listaSkeniranih.appendChild(li5);
	listaSkeniranih.appendChild(li6);
	listaSkeniranih.appendChild(li7);
}

db.collection('ulazi').get().then((snapshot) => {
	snapshot.docs.forEach(doc => {
		renderList(doc);
	})
})


That code is example, but only for appending text, with reading values. For me is needed a for button. Thanks advance.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900