how to set retrived firebase data into div using javascript

Question

I want to put data into div which I already retrieved from firebase. Here is my javascript code:


var rootRef = firebase.database().ref().child("products");
rootRef.on("child_added", snap => {
    alert(snap.val());
    var image = snap.child("image").val();
    var desp = snap.child("description").val();

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

what should I write into append parenthesis to show data into below format html code:

<div id="product_section" class="container">
        <div class="row">
          <div class="col-md-6 col-sm-6 productDetails">
            <p>Something from description field of Firebase 1 </p>
          </div>
          <div class="col-md-6 col-sm-6">
            <img src="image src form Firebase">
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 col-sm-6 productDetails">
            <p>Something from description field of Firebase 2 </p>
          </div>
          <div class="col-md-6 col-sm-6">
            <img src="image src form Firebase">
          </div>
        </div>
</div>

I want to show image and description field between "< img >" and "< p >" respectively.

ian00 · Accepted Answer · 2020-11-19 08:30:21Z

2

It seems you almost have the job done.

To put html tags into div, the $("#product_section").append(); need an string as input that holds corresponding structure as followings:

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

I try to align the code to you html tags so that it is easier to compare.

answered Nov 19, 2020 at 8:30

ian00

1341 silver badge4 bronze badges

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

4 Comments

Ferdousi Over a year ago

how can I show odd id data in one side and even in another side? Please help!!

ian00 Over a year ago

@Ferdousi I guess you are trying to make your page more readable. then i recommend you use a <table> with two column instead of <div>, as <table> is easier to understand and align element within. It may in the end present like <table><tr><td>even item</td><td>odd item</td></tr><tr>...</tr>.......</table>

Ferdousi Over a year ago

For odd id, I want to show description then image side by side and for even id I want to show image then description side by side, hope you understand

Ferdousi Over a year ago

please see this question for better understanding, question link,click here

Collectives™ on Stack Overflow

how to set retrived firebase data into div using javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related