How To Show Retrived Firabase Data In Different View Using Javascript

For odd id, I want to show description then image and for even id I want to show image then description. But which code I use is given below. var rootRef = firebase.database().ref(

Solution 1:

You'll have to get the key from each snapshot, determine whether it's odd or even, and then update the HTML based on that.

var rootRef = firebase.database().ref().child("products");
rootRef.on("child_added", snap => {
    var key = snap.key;
    var isOdd = parseInt(snap.key) % 2 == 1;
    var desp = snap.child("description").val();
    var image = snap.child("image").val();
    var imageString = '<div class="col-md-6 col-sm-6">'
         + '<img src="' + image + '">'
     + '</div>';
    var despString = '<div class="col-md-6 col-sm-6 productDetails">'
         + '<p>' + desp + '</p>'
     + '</div>';
    var image_and_desp_string =       
   '<div class="row">'
     + (isOdd ? despString : imageString)
     + (isOdd ? imageString : despString)
    + '</div>';

    $("#product_section").append(image_and_desp_string);
});

Solution 2:

It cannot be done using forEach, details code is given below:

var query = firebase.database().ref("products").orderByKey();
query.once("value")
  .then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      const key = Number(childSnapshot.key);
      console.log(key);
      // childData will be the actual contents of the child
      var desp = childSnapshot.child("description").val();
      var img = childSnapshot.child("image").val();

      key % 2 === 0 ?
      $("#product_section").append(          //show value from Firebase, image then description
        '<div class="row">'
          + '<div class="col-md-6 col-sm-6">'
              + '<img src="' + img + '">'
          + '</div>'
          + '<div class="col-md-6 col-sm-6 productDetails">'
              + '<p>' + desp + '</p>'
          + '</div>'
         + '</div>')
      : $("#product_section").append(        //show value from Firebase
        '<div class="row">'
          + '<div class="col-md-6 col-sm-6 productDetails">'
              + '<p>' + desp + '</p>'
          + '</div>'
          + '<div class="col-md-6 col-sm-6">'
              + '<img src="' + img + '">'
          + '</div>'
         + '</div>');
  });
});