Calling Firebase database child() returns "undefined" in Javascript

Question

This is what I have

Firebase Database:

setores: {
    -KkBgUmX6BEeVyrudlfK: {
        id: '-KkBgUmX6BEeVyrudlfK',
        nome: 'test'
    }
    -KkDYxfwka8YM6uFOWpH: {
        id: '-KkDYxfwka8YM6uFOWpH',
        nome: 'test1'
    }
}

JavaScript

var setorRef = firebase.database().ref().child("setores");
/* DELETE ROW */
$("#tbody_setores").on('click','.delete-btn', function(e){
    var $row = $(this).closest('tr'),
       rowId = $row.data('id');

    var rowId = $row.data('id');
    //it should remove the firebase object in here
    setorRef.child(rowId).remove()
    .then(function() {
      //after firebase confirmation, remove table row
      $row.remove();
    })
    .catch(function(error) {
      console.log('Synchronization failed');
    });  
});

setorRef.on("child_changed", snap => {

  var setorKey = snap.child("id").val();
  var nome = snap.child("nome").val();

  $("#tbody_setores").append("<tr data-id'"+setorKey+">"+
                                "<td class='mdl-data-table__cell--non-numeric'>" + nome + "</td>" +
                                "<td class='mdl-data-table__cell--non-numeric'>"+
                                  "<div buttons>"+
                                    "<button class='delete-btn mdl-button mdl-js-button mdl-button--icon mdl-button--colored'><i class='material-icons'>delete</i></button>"+" "+
                                  "</div>"+
                                "</td>"+
                              "</tr>");
});

Now, what I want to do with this code is: when I click on the remove button that has been appended on the table, it should remove the row and the corresponding object in the database. I was using this same code on another table (here), and it works just fine, but on this one, the rowId is returning undefined instead of the id.

You have a mismatch between the JSON and the code: snap.child("nome").val(), while the JSON has name: 'test'. It's probably not the cause of the problem you asked about (since it's not about id), but still a thing you'll want to fix. — Frank van Puffelen
– Frank van Puffelen, Commented May 28, 2017 at 17:37
oh thank you, I'll be changing this, but yea, its not the cause of the problem :c — Leonardo Carvalho
– Leonardo Carvalho, Commented May 28, 2017 at 18:01

Paulo Mattos · Accepted Answer · 2017-05-28 21:35:59Z

2

Looks like you have a couple of typos in your HTML (in the data-id attribute):

$("#tbody_setores").append("<tr data-id'"+setorKey+">"+

which should probably read like this:

$("#tbody_setores").append("<tr data-id='"+setorKey+"'>"+

this would nicely explain why rowId is returning undefined instead of the id ;)

edited May 28, 2017 at 21:35

answered May 28, 2017 at 21:18

Paulo Mattos

19.4k10 gold badges80 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leonardo Carvalho Over a year ago

Last time you answered one of my questions, you solved it with only two lines of code, now you solved it with 2 characters haha thanks a lot.

Paulo Mattos Over a year ago

@LeonardoCarvalho Haha :-)

Collectives™ on Stack Overflow

Calling Firebase database child() returns "undefined" in Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related