如何使用 javascript 中的每个循环获取当前索引并更新到实时数据库

Question

I am working with javascript also am a newbie in js so actually, I want to get the current index and then update a specific field to the realtime if somebody helps me out I will thankful to him here is my script where I fetch the data in realtime firebase and I put my value inside inner HTML format so I want when user press specific buttons its pending data update to booked.

userDataRef.once("value").then(function(snapshot) {
  snapshot.forEach(function(childSnapshot, index) {
    console.log(childSnapshot.val());
    key = childSnapshot.key;
    userid = childSnapshot.val().userid;
    var carid = childSnapshot.val().carid;
    var imageload = childSnapshot.val().imgurl;
    var loadfirstname = childSnapshot.val().userfirstname;
    var loadcarname = childSnapshot.val().carname;
    var loadlastname = childSnapshot.val().userlastname;
    var loadphonenumber = childSnapshot.val().phoneNumber;
    var loaddropoffadd = childSnapshot.val().dropoffaddress;
    var loadpickupadd = childSnapshot.val().pickupaddress;
    loadprice = childSnapshot.val().price;


    var appenddata =
      '<div class="container rounded"  style="background-color: #00829E" id="datalist">' +


      '<div class="row">' +
      '<div class="col-md-12">' +
      '<div class="row">' +
      '<div class="col-md-4 mt-2 mb-2 ml-2">' +
      '<div class="container rounded"style="background-color: #efefef">' +
      '<center>' +
      '<img src="' + imageload + '" id="loadimage" style="height: 100px; width: 100px;">' +
      '</center>' +
      '</div>' +
      '</div>' +

      '<div class="col-md-6 mt-2 mb-2">' +
      '<div class="container rounded para">' +
      '<h5 id="loadcarname">' + loadcarname + '</h5>' +
      '<p id="loadfirstname">First Name: ' + loadfirstname + '</p>' +
      '<p id="loadlastname">Last Name: ' + loadlastname + '</p>' +
      '<p id="loadphone">Phone Number: ' + loadphonenumber + '</p>' +
      '<p id="loadpickup">Pickup Address: ' + loadpickupadd + '</p>' +
      '<p id="loaddropoff">Dropoff Address: ' + loaddropoffadd + '</p>' +
      '</div>' +
      '</div>' +

      '<div class="col-md-2"></div>' +

      '</div>' +


      '<div class="row">' +
      '<div class="col-md-4"></div>' +
      '<div class="col-md-4"></div>' +
      '<div class="col-md-2 para1 mt-2">' +
      '<p id="loadprice">Price:' + loadprice + ' Sum/Day</p>' +
      '</div>' +
      '<div class="col-md-2 mb-3">' +
      '<button class="btn btn-info btn-sm rounded-pill check"  id="approvebutton" value ="Booked" onclick="myFunction(this.value)"  aria-pressed="true">Approve</button>' +
      '</div>' +

      '</div>' +
      '</div>' +
      '</div>' +
      '</div>';
    $("#listshow").append(appenddata);



  });
});

when user press the button I call function named Myfunction I just want to update specific id in that function

my function name script

function myFunction(value) {
  approvecar = document.getElementById('loadprice').value;

  firebase.database.ref("carBooking/" + userid).update({
    status: ""
  });
}

Answer 1

To be able to write a value in the database, you need to know the complete path to that node. Right now, you know what value to write, but you've lost information about what key (the -M.... value) to write it to.

So you'll need to pass the key of the item the user clicked on, from your HTML into the myFunction function.

The simplest way to do that is something like:

'<button class="btn btn-info btn-sm rounded-pill check"  id="approvebutton" value ="Booked" 
onclick="myFunction(\''+key+'\', this.value)" // 👈 is changed
aria-pressed="true">Approve</button>' +

There may be some syntax problems in this part as I'm having a hard time parsing your HTML construction code.

Now that you're passing both the key and the value, you can update the correct node with:

function myFunction(key, value) {
  approvecar = document.getElementById('loadprice').value;

  firebase.database.ref("carBooking").child(key).update({
    status: ""
  });
}