Javascript (firebase): how can the firebase database key of a clicked item be obtained?

Question

I have a firebase database structure like this

and I have a loop function

 var jobTitle = document.getElementById('jobTitle');
     var jobDescription= document.getElementById('jobDescription');

         firebase.auth().onAuthStateChanged((user) => {
        if (user) {
              database = firebase.database();

             var ref = database.ref('/Jobs/');
          ref.on('value', gotData,  errData);

  }
  })

  var jobSnap = {};

   function gotData(data) { 
        var date = Today;
        var jobs = data.val();
        var keys = Object.keys(jobs);

        var container = document.getElementById('pos_1'); 
        var container2 = document.getElementById('jobapp'); 

        for (var i = 0; i<keys.length; i++) {
        var k = keys[i];
        var newCard = `

            <li class="pos-card" id="pos_1">
                  <div class="content">
                    <div class="title new">`+jobs[k].JobTitle+`</div>
                    <div class="dept">Customer Service</div>
                    <div class="date">date</div>
                    <div class="refer">Apply</div>
                  </div>
                  <ul class="desc">

                    <li>`+jobs[k].JobSummary+`</li>
                  </ul>
            </li>
        `;
        container.innerHTML += newCard;
        }
      }


    function errData(err) {
          console.log('Error!');
          console.log(err);
        }

This is the function that submits the application to the DB under the respective job id.

    function newApplication() {

      var database = firebase.database();
      var applicant_Name = document.getElementById('name').value;
      var applicant_Number = document.getElementById('phone').value; 
      var applicant_email = document.getElementById('email').value; 
      var AuthorId = firebase.auth().currentUser.uid;
      var cover_letter = document.getElementById('cover_letter').value;


      var JobId = jobSnap.key;

      var postData = {
              ApplicantName: applicant_Name,
              ApplicantNumber: applicant_Number,
              Applicantemail: applicant_email, 
              Author: AuthorId,
              Cover_letter: cover_letter,
          };

      var newPostKey = firebase.database().ref().child('Applications').push().key;    

      var updates = {};


          updates['/Applications/' + newPostKey] = postData;
          updates[ JobId + '/Applications/' + newPostKey] = postData;

      return firebase.database().ref().update(updates); 

  }

that retrieves all entries in the database Jobs node and display them like this

When a user clicks the apply button on a job an application fades in; all the code that retrieves the Jobs and application are in the same html file. What I need to do is find a way to capture the firebase job key of the job that was clicked so that i can save the job application under the respective jobs. I have tried many methods but still no luck how can I implement this?

Answer 1

You'll need to keep track of the key of each item in the HTML. A common way to do that is by injecting it into the id attribute in the HTML:

    var newCard = `
        <li class="pos-card" id="${k}">

Then you can use the id when the user clicks on an element to find the item in the database.

A more idiomatic way to write your code would be:

function gotData(data) { 
    var date = Today;

    var container = document.getElementById('pos_1'); 
    var container2 = document.getElementById('jobapp'); 

    data.forEach(function(jobSnap) { // loop over all jobs
      var key = jobSnap.key;
      var job = jobSnap.val();
      var newCard = `
        <li class="pos-card" id="${key}">
              <div class="content">
                <div class="title new">${job.JobTitle}</div>
                <div class="dept">Customer Service</div>
                <div class="date">${date}</div>
                <div class="refer">Apply</div>
              </div>
              <ul class="desc">
                <li>${job.JobSummary}</li>
              </ul>
        </li>
    `;
    container.innerHTML += newCard;
    }
  }

Answer 2

If the list is dynammic then you can assign it a unique id and add onclick listener

In your JS function,

Function name(value) { }