How to display Firebase data in HTML [object Object] currently displaying

Question

I've set up the Javascript below to display all the objects in my Firebase database. But when I display it on my webpage it only returns [object Object]. What am I missing?

 events.on('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
    var eventkey = childSnapshot.key;
    var eventdata = childSnapshot.val();

    var card = document.createElement('div');
    card.setAttribute('class', 'card');
    document.body.appendChild(card);

    var cardtitle = document.createElement('p');
    cardtitle.innerHTML = eventdata;
    card.appendChild(cardtitle);  

   console.log(event);
   });
});

Thanks for your help

you could use cardtitle.innerHTML = JSON.stringify(eventdata) instead of cardtitle.innerHTML = eventdata; — Matthias Gwiozda
– Matthias Gwiozda, Commented Jun 3, 2017 at 16:15

Erin B. · Accepted Answer · 2017-06-03 15:00:09Z

I got it working. Saw this post which helped: Display data from Firebase database in a HTML page

This is what I changed:

// displays event listings on browse.html - modified 3/6/17
   events.on('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
    var eventkey = childSnapshot.key;
    var eventdata = childSnapshot.val();

    // listing data to be displayed
    var browsetitle = childSnapshot.val().title; // added this
    var browsecity = childSnapshot.val().city; // added this

    var card = document.createElement('div');
    card.setAttribute('class', 'card');
    document.body.appendChild(card);

    var cardtitle = document.createElement('p');
    cardtitle.innerHTML = browsetitle + browsecity; // added this
    card.appendChild(cardtitle);  

   console.log(eventdata); // changed this to see what was going on
    });
 });

Collectives™ on Stack Overflow

How to display Firebase data in HTML [object Object] currently displaying

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related