Hola todos buenas noches , me dirijo a ustedes ya que tengo el siguiente problema.
resulta que estoy trabajando con Fireabase y Javascript, tengo en mi base de datos una colección llamada infoUsuarios y esta contiene la información de un input text y un textArea
de momento todo bien puedo guardar la información, pero ahora quiero Obtener esos datos y mostarlos en una ul que pinta eso datos en un li con el valor de los campos nombreDeUsuario y biografía creado de manera dinámica desde javascript adjunto mi código, de antemano gracias
`
const listas = document.getElementById("lista");
db.collection("infoUsuarios")
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
let li = document.createElement("li");
let username = document.createElement("h4");
let bio = document.createElement("p");
username.textContent = doc.data().nombreDeUsuario;
bio.textContent = doc.data().biografia;
li.appendChild(username);
li.appendChild(bio);
listas.appendChild(li);
});
})
.catch( error => {
console.log("Error no puedo obtener estos datos: ", error)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
<title>Utilizando Firestore</title>
</head>
<body>
<!--Generar una interfaz para agregar datos a la base de datos-->
<div class="contenido">
<ul class="lista">
</ul>
<input type="text" id="nombreusuario" placeholder="nombreusuario">
<textarea name="" id="sobre" cols="30" rows="10" placeholder="sobre"></textarea>
<button id="boton">Agregar</button>
</div>
<script>
firebase.initializeApp({
apiKey: "AIzaSyB-u83B-W_gwnKCIwVTky4IzIsv85N03f0",
authDomain: "miprimerproyecto-7c837.firebaseapp.com",
projectId: "miprimerproyecto-7c837"
});
const db = firebase.firestore();
</script>
<script src="app.js"></script>
<!--<script src="getData.js"></script>-->
</body>
</html>
`