2

Estoy haciendo una lista con datos que obtengo de Firebase, todo funciona bien hasta que actualizo un dato en Firebase. Al actualizar un dato se genera una nueva lista abajo de la anterior con los datos actualizados, y cada vez que se actualiza un dato se genera una lista adicional.

La idea es hacer que la lista de actualice dentro de la misma, sin tener que generar una lista nueva a cada rato o generar una lista nueva y eliminar la anterior...

Este es el código que estoy usando

var content = '';  
var database = firebase.database();
database.ref().child("A_Usuarios").orderByChild("TipoUsuario")
.equalTo("Usuario1")
.on('value', function(snapshot){
    if(snapshot.exists()){
        console.log(snapshot.key)
        content +='<ul>';  
        snapshot.forEach(function(data){
            var val = data.val();
            content += '<li>' + val.Usuario + '</li>';
            content += '<li>' + val.Usuario + '</li>';
            content += '<li>' + val.Usuario + '</li>';
            content += '<li>' + val.Usuario + '</li>';
            content += '<li>' + val.Usuario + '</li>';  
        });
        content +='</ul>';
        $("#A_Usuarios").empty().html(content);
    }
});

Espero alguien entienda el problema y pueda ayudarme, muchas gracias.

2
  • Haz un console.log(content) antes de insertarlo en el HTML para ver lo que estás inyectando en el DOM. Tras verlo deberías encontrar el problema.
    – phpMyGuel
    el 20 jun. 2019 a las 14:44
  • Esta es la lista que obtengo en console.log(content) cuando ejecuto este código... <ul><li>Starn</li><li>Telur</li><li>Chil</li><li>Econ</li><li>Chac</li></ul> el 20 jun. 2019 a las 14:47

1 respuesta 1

3

El problema es el content +='<ul>' que estás ejecutando, ya que siempre le vuelve a agregar una lista, la corrección sería simple, siempre que exista un snapshot content debe ser igual a < ul > y de ahí empezar a poblarlo otra vez:

var content = '';  
var database = firebase.database();
database.ref().child("A_Usuarios").orderByChild("TipoUsuario")
.equalTo("Usuario1")
.on('value', function(snapshot){
    if(snapshot.exists()){
        console.log(snapshot.key)
        content = '<ul>';  
        snapshot.forEach(function(data){
            var val = data.val();
            content += '<li>' + val.Usuario + '</li>';
            content += '<li>' + val.Usuario + '</li>';
            content += '<li>' + val.Usuario + '</li>';
            content += '<li>' + val.Usuario + '</li>';
            content += '<li>' + val.Usuario + '</li>';  
        });
        content +='</ul>';
        $("#A_Usuarios").empty().html(content);
    }
});

Espero que sea lo que necesitas.

5
  • Tienes razón, ese es el problema, pero cuando elimino el + entonces no se genera la tabla... Por eso todavía no encuentro la solución. el 20 jun. 2019 a las 14:40
  • Existe alguna forma de generar la lista ul aparte de este código y rellenarla externamente con los datos que obtengo de Firebase eliminando los que ya tenía? el 20 jun. 2019 a las 14:44
  • 1
    En teoría sería hacer lo mismo que estamos intentando, se me ocurre que le elimines el .empty() para ver qué tal se comporta. Como tal el contenido debería mostrarse sin problema. el 20 jun. 2019 a las 14:48
  • 1
    Debo haberme equivocado copiando tu código, porque lo intente de nuevo y ahora funciona correctamente. Muchas gracias por tu ayuda. Esta es la solución. el 20 jun. 2019 a las 14:50
  • 1
    Que bien haber sido de ayuda. el 20 jun. 2019 a las 15:23

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.