Simplest way to add data to Firebase with Javascript

Question

I've looked at previous posts and the documentation and other resources, but I just cannot fiugre out how to add an entry to my firebase database when a button is clicked. The button calls writeNewPost(). Here is what I tried

<button type="submit" class="btn btn-light" onclick="writeNewPost()">Submit</button>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>

<script>
  var config = {
    apiKey: MYAPIKEY,
    authDomain: MYDOMAIN,
    databaseURL: MYURL,
    projectId: MYPROJECT,
    storageBucket: STORAGEBUCKET,
    messagingSenderId: SENDERID
  };
  firebase.initializeApp(config);
</script>

<script>
    function writeNewPost() {
      var postData = {
        "Name": "Brett"
      };

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

     var updates = {};
     updates['/' + newPostKey] = postData;

     return firebase.database().ref().update(updates);
   }
</script>

All I want is to have "Name":"Brett" under the root.

So that's basically from: firebase.google.com/docs/database/web/read-and-write — Roko C. Buljan
– Roko C. Buljan, Commented Aug 16, 2017 at 16:48
I see nothing wrong with your code... beside letting me wonder if '/' + newPostKey is the right path... — Roko C. Buljan
– Roko C. Buljan, Commented Aug 16, 2017 at 16:53
Humm... is your button calling that function at all? Cause I think, the way you put it - that the function in undefined at onclick="writeNewPost()" Have you tried to put a console.log("CALLED!") inside your writeNewPost? — Roko C. Buljan
– Roko C. Buljan, Commented Aug 16, 2017 at 16:55

Roko C. Buljan · Accepted Answer · 2017-08-16 17:48:11Z

2

Your code seems quite good. To get you going with simple communication with Firebase you first need to set some rules https://firebase.google.com/docs/database/security/quickstart

P.S: used your code, added rules into Database → Rules(Tab) and it works.

Disclaimer!! use the below only for a limited test period of time - since it opens your database to the public - And read always the warnings that might appear in the panel!

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

From the docs:

It is essential that you configure these rules correctly before launching your app to ensure that your users can only access the data that they are supposed to.

The way you presented your code - the inline onclick= points to a function that is only defined later in your code - therefore you're at risk of it being undefined.

A better way to keep your JS in one place.
Remove the inline onclick and add an ID selector like id="submitPost"

<button id="submitPost" type="submit" class="btn btn-light">Submit</button>

Than inside your script use:

document.getElementById("submitPost").addEventListener("click", writeNewPost);

edited Aug 16, 2017 at 17:48

answered Aug 16, 2017 at 17:13

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

3 Comments

Frank van Puffelen Over a year ago

Please always accompany such advice by a disclaimer to only do this for a limited amount of time, since it opens the database up for abuse by any user.

Brett Comardelle Over a year ago

This still doesn't work. Btw, my database is empty. I'm trying to add to it. So I am trying to place a key-value pair under the root.

Roko C. Buljan Over a year ago

@brett my hands are tied. I used your code modified with my suggestion to make it work, created a firebase Project, set the test rules, clicked the button and I got directly under root your name key/value data stored. Is there something I'm missing?

Collectives™ on Stack Overflow

Simplest way to add data to Firebase with Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related