how to show retrived firabase data in different view using javascript

Question

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().child("products");
rootRef.on("child_added", snap => {
    //alert(snap.val());
    var desp = snap.child("description").val();
    var image = snap.child("image").val();
    var image_and_desp_string =       
   '<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="' + image + '">'
     + '</div>'
    + '</div>';

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

this code shows image and description side by side for all data. I want to make difference for odd id and even id data. Please help!! My firebase database is looked like this image.

Are you adding any specific ID to your RTDB objects? If so, is it an integer? The auto generated IDs are monotonically increasing string. You cannot use those to decide odd/even. You can try to maintain a global counter starting from zero and each time you add a value to your document, you can increment this counter. Check the value of the counter for odd/even before adding the values in your DOM. Other than that, I don't see any way to achieve that. — Abrar Hossain
– Abrar Hossain, Commented Nov 19, 2020 at 10:11
@AbrarHossain yeah, I add and it is integer. Then what should I do? please help — Ferdousi
– Ferdousi, Commented Nov 19, 2020 at 10:15
If you have an ID field in the document, you can try: const id = snap.child('id').val(); to get the value. Then check for odd/even: const isEven = id % 2 === 0 ? true : false. — Abrar Hossain
– Abrar Hossain, Commented Nov 19, 2020 at 10:21
@AbrarHossain I edit my question, please see that and kindly tell me what to do? — Ferdousi
– Ferdousi, Commented Nov 19, 2020 at 10:27

Frank van Puffelen · Accepted Answer · 2020-11-19 14:28:33Z

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);
});

answered Nov 19, 2020 at 14:28

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

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

Comments

Ferdousi · Accepted Answer · 2020-11-19 14:50:05Z

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>');
  });
});

Collectives™ on Stack Overflow

how to show retrived firabase data in different view using javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related