{"id":10695,"date":"2021-10-31T15:38:46","date_gmt":"2021-10-31T14:38:46","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=10695"},"modified":"2021-10-31T15:38:48","modified_gmt":"2021-10-31T14:38:48","slug":"firebase","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/firebase\/","title":{"rendered":"How to retrieve data from firebase with javascript"},"content":{"rendered":"\n

First open the api<\/p>\n\n\n\n

<script src=\"https:\/\/www.gstatic.com\/firebasejs\/4.10.1\/firebase.js\"><\/script><\/pre>\n\n\n\n
Then use your credentials to initialize the database<\/p>\n\n\n\n
<script>\n  var config = {\n    apiKey: \"********************************\",\n    authDomain: \"**************.firebaseapp.com\",\n    databaseURL: \"https:\/\/******************.firebaseio.com\/\",\n    projectId: \"******************\",\n    storageBucket: \"https:\/\/******************.firebaseio.com\",\n    messagingSenderId: \"**************\"\n  };\n  firebase.initializeApp(config);\n  var database = firebase.database()\n<\/script><\/pre>\n\n\n\n
Now you are ready to retrieve the data<\/p>\n\n\n\n
var dbmusto = firebase.database().ref().child(“4AE”).child(“musto”);<\/strong><\/p>\n\n\n\n
in this variable there will be the link to the recod you want into your database, child must of child 4AE.<\/p>\n\n\n\n
Read the value in the record and show it.<\/p>\n\n\n\n
In the html code put this<\/p>\n\n\n\n
<div id=\"showdata\"><\/div><\/pre>\n\n\n\n
In the script js code this<\/p>\n\n\n\n
dbmusto.on(\"value\", snap => showdata.innerText = snap.val());<\/pre>\n\n\n\n
The value (snap) into the record is put into showdata div with innerText<\/p>\n\n\n\n
If you want to change the value in the record on the fly, link it to a variable that you can modify clicking a button, for example<\/p>\n\n\n\n
dbmusto.on(\"value\", snap => n_musto = snap.val())<\/pre>\n\n\n\n
When n_musto changes, the value in the record is changet, becomes the snap.val, to say so. For example, you can change the value of n_musto clicking a button like this:<\/p>\n\n\n\n
<button type=\"button\" class=\"btn btn-info btn-lg\" onclick=\"let n_rucco=0;dbmusto.set(--n_musto)\">[ - ]<\/button><\/pre>\n\n\n\n
When we click on the butto the value in the reference dbmusto is set to decrease of 1. It will show in the showdata div, seen right now.<\/p>\n","protected":false},"excerpt":{"rendered":"First open the api Then use your credentials to initialize the database Now you are ready to retrieve the data var dbmusto = \n [...]<\/a>","protected":false},"author":1,"featured_media":10167,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-10695","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-examples"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":true,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/10695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=10695"}],"version-history":[{"count":1,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/10695\/revisions"}],"predecessor-version":[{"id":10696,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/10695\/revisions\/10696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/10167"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=10695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=10695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=10695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}