0

How to view the specific child on list on my JavaScript.

My code:

var rootRef = firebase.database().ref().child("tutee");

rootRef.on("child_added", snap =>
{

var sno = snap.child("studentnumber").val();
var fname = snap.child("firstname").val();
var lname = snap.child("lastname").val();
var email = snap.child("email").val();
var key = snap.key;
var view = snap.key;
var btn = "<button key='"+ key +"' class='removeEmployee mdl-button mdl-js-
button mdl-button--raised mdl-js-ripple-effect mdl-button--
accent'>Remove</button>";
var btnview = "<button view='"+ view +"' class='removeEmployee mdl-button 
mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--
accent'>View</button>";



$("#table_body").append("<tr><td>"+sno+"</td><td>"+fname+"</td><td> 
"+lname+"</td><td>" + btn + "</td><td>" + btnview + "</td></tr>");

});
/* Delete */

$('#table_body').on('click', ".removeEmployee", function(){ // note: using 
'removeElement' as class, not as id
var key = $(this).attr('key');
var itemToRemove = rootRef.child(key);
itemToRemove.remove()
.then(function() { // removed from Firebase DB
console.log("Remove succeeded.")
alert("Successfully remove.");
window.location.reload();
})
.catch(function(error) {
console.log("Remove failed: " + error.message)
});

});
// keeping this separate so that even if the item is removed by any other 
means (e.g.- directly from server console) this UI will remain in sync
rootRef.on('child_removed', function(snap) {
var key = snap.key;
$('#'+key).remove();
});

I want to click the view button, then it will go to the information of the child where I click it.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Sherlynn Razon Mangubat
  • 11
  • 4

1 Answers1

0

I think you want to retrieve the data on view button's click. If so , you can put the following code under view button's click function.

var key = $(this).attr('view');
firebase.database().ref("tutee/" + key).once("value", snap =>{
              var sno = snap.val().studentnumber;
              var fname = snap.val().firstname;
              var lname = snap.val().lastname;
              var email = snap.val().email;
}

Read this , retreiving data from firebase.

Satish Kumar
  • 601
  • 6
  • 14
  • Thanks but how can I display the data into html? – Sherlynn Razon Mangubat Aug 24 '17 at 11:16
  • Hello can you elaborate more your answer so you can answer my problem please. I want to display a specific child into textbox :( – Sherlynn Razon Mangubat Sep 18 '17 at 13:30
  • until now I cannot do it. please help me – Sherlynn Razon Mangubat Sep 18 '17 at 13:31
  • Hi , First check if you could retrieve the data on view button's click , using above code. **What do you mean by displaying specific child into textbox.?** As every child has many fields like sno, fname, lname etc. And in the above code I have retrieved the attribute _view_ from the list item(that you have already set) then , using that key a firebase fetch is done. – Satish Kumar Sep 20 '17 at 20:54
  • Also I don't think that adding custom attributes to DOM elements is a good practice, like you added key and view attributes to button. – Satish Kumar Sep 21 '17 at 06:29
  • Hello I've already done with this code. I seen my problem from this code I double declare my key the var view= snap.key it should be the var key=snap.key only. I already displayed the specific child on the console. now my problem is I want to display the child from another html and I dont now how. – Sherlynn Razon Mangubat Sep 21 '17 at 12:51
  • $('#table_tutors').on('click', ".viewEmployee", function(){ window.location='view.html'; var key = $(this).attr('key'); var ref = database.ref("tutors/" + key); ref.on("value", gotOne); function gotOne(data) { var tutors = data.val(); $('#studentNo').val(tutors.studentnumber); console.log("number: " + tutors.studentnumber + "firstname: " + tutors.firstname + "lastname: " + tutors.lastname ); } }); – Sherlynn Razon Mangubat Sep 21 '17 at 12:55
  • the studentNo are the input from view.html. and it doesnt display the student number from the html. do you have any idea on how to display the child from another html? – Sherlynn Razon Mangubat Sep 21 '17 at 12:57
  • If you want to send data to another page without using server then you have to use cookies or local storage. Hope [this](https://stackoverflow.com/questions/16264253/sharing-a-variable-between-multiple-html-pages) helps. Idea is to pass **tutors.studentnumber** to another page using cookie/local storage/hash . There you can update your view accordingly. – Satish Kumar Sep 21 '17 at 19:21