0

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>

`

1 respuesta 1

0

Al ul le tienes asignada la clase lista pero al principio del código javascript lo estás buscando por id

En cuanto a la manera de leer de firestore un pequeño comentario, más de estilo que otra cosa, y es que crees una variable donde guardar el resultado de doc.data() y luego ya leas los campos desde ahí, para evitar llamar varias veces a .data()

1
  • Hola javier, buenas noches me sirvio muchisimo estaban tan cesgado en ver porque no me pintaban los componenetes que coloque una clase en vez de un id. tendre en cuenta lo de crear una variables para doc.data(). ya que bueno asi es mas dificil de leer, muchas gracias por tu comentario me sirvio Commented el 9 dic. 2021 a las 1:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.