I am trying to retrieve data from my database. My code creates an empty array and appends a child to it each time one is added. It then creates the list (ignore the MDL classes) and adds it to the HTML document.
<script>
// get emergencies to array
var firebaseRef = firebase.database().ref('Incidents');
var emergencies = [];
// var emergencies = ['Test', 'Test 2', 'Test 3'];
firebaseRef.on('child_added', function(snap) {
snap.forEach(function (childSnap) {
console.log(childSnap.val());
emergencies.push(childSnap.val());
});
});
var opentag = '<ul class="mdl-list" id="emergenciesList">',
closetag = '</ul>',
array = [];
for (i = 1; i <= emergencies.length; i++) {
array[i] = '<li class="mdl-list__item">' + emergencies[i] + '</li>';
}
var newArray = array.join(" ");
document.getElementById('foo').innerHTML = opentag + newArray + closetag;
</script>
The weird thing is, that at the console.log() statement, the data is retrieved perfectly fine, but after the string manipulation, newArray is undefined. Help!
The problem is caused by the way you've ordered your code. The order in which the lines are executed are not what you think. It's easiest to see this if you reduce it to this:
var firebaseRef = firebase.database().ref('Incidents');
console.log("Before database loading started");
firebaseRef.on('child_added', function(snap) {
console.log("In child_added");
});
console.log("After database loading started");
Now the order in which the logging will be written is:
Before database loading started
After database loading started
In child_added
This is probably not what you expected. The reason the logging shows in this order is that Firebase loads the data asynchronously. So while the on('child_added' lines starts loading the data, it may take some time to get that data from the Firebase servers. Instead of waiting for the data (which would block the ability of your users to interact with your app), the browser continues to execute the statements after the block. Then when the data is available, it calls your callback function.
A common way of dealing with the asynchronicity is by reframing your problems. Right now your code is written as "first load the data, then add it to the HTML". Try instead framing it as "start loading the data. When the data is available, add it to the HTML". That translates into this code:
var firebaseRef = firebase.database().ref('Incidents');
firebaseRef.on('child_added', function(snapshot) {
var ul = document.getElementById("emergenciesList");
if (!ul) {
document.getElementById('foo').innerHTML = '<ul class="mdl-list" id="emergenciesList"></ul>';
ul = document.getElementById("emergenciesList");
}
var li = document.createElement("li");
li.classList.append("mdl-list__item"); // or: li.className = "mdl-list__item"
li.id = snapshot.key;
li.innerText = snapshot.val();
ul.appendChild(li);
});
I removed the loop over the snapshot, because I'm not sure it is needed and it complicates the code. If your data structure needs the loop, you can add it back where it was.
Related
Sooooo,
I want to get data from a google sheet to a website which appends the passed data dynamically to the website so the amount of itme's on the website is equal to the amount of rows. I pretty much got everything done separately but I just cant seem to figure out how to combine them.
I set up a node.js project which uses my Api key to retrieve the data, manipulate and push it into an array.
also maybe there's a more efficient way to push the data but i couldn't figure anything else out but saving it to a file and then reading it back. I then pumped that into a AWS api gateway+Lambda funtion which didn't really work because I couldn't get Lambda to require google/api but i think i could sort that out.
I also already did all the HTML / JS on the website to push the data to the page I just cant seem to figure out how to get the data from my AWS-http-link into my website. No matter if I use async or promise or none of both It just can't get the data.
'ISSUES: using google/api inside Lambda, getting data from Api to array, maybe diffrent way to get the data from google api'
Thank you in advance!
AWS-link: https://po7bu16g2i.execute-api.eu-central-1.amazonaws.com/live/celldata
//JS code on website
var receivearray =[];
function createEntry(data){
for(i=0;i<data.length;i++){
var outdt = document.createElement('div');
outdt.className='outwrap';
var pers_name = document.createElement('div');
pers_name.className='name';
var pers_name_txt= document.createElement('h3');
pers_name_txt.className='name_head';
pers_name_txt.innerHTML=data[i][0];
outdt.append(pers_name);
pers_name.append(pers_name_txt);
for(k=1;k<data[i].length;k++){
var top =document.createElement('div');
top.className='text_wrap';
var q = document.createElement('p');
q.className='frage';
q.innerHTML=data[i][k][0];
var a= document.createElement('p');
a.innerHTML=data[i][k][1];
outdt.append(top);
top.append(q,a);
}
document.body.appendChild(outdt);
}
};
createEntry(receivearray);
//Node.js Code
//requirements
var GoogleSpreadsheet = require('google-spreadsheet');
var crds = require('./credt.json');
const fs = require('fs');
//updates the data-tfile
function update(sheetid){
//google api shapens
var doc = new GoogleSpreadsheet(sheetid);
doc.useServiceAccountAuth(crds,
function (err) {
doc.getRows(1,
function (err, rows) {
//saves all retrieved data into textfile
fs.writeFile('ting.txt', JSON.stringify(rows),
function (err) {
//checks if file was saved succesfully
if (err) throw err;
console.log('updated')
}
)
}
)
}
)
}
function prepdata(){
//define variables
var text = fs.readFileSync("ting.txt", "utf8");
var findata =[];
var hold=[];
//singleout all row-elements
for(x=0;x<text.length;x++){
if(text.slice(x,x+7)=='"name":'){
hold.push(text.slice(x+7,x+120));
}
}
//split data by , into sets
for(x=0;x<hold.length;x++){
findata.push(hold[x].split(','));
}
//push sets into arrays
for (var k = 0; k < findata.length; k++){
for (var i = 0; i < findata[k].length; i++){
findata[k][i] = findata[k][i].replace(/"/g, " ");
findata[k][i] = findata[k][i].split(':');
}
}
return findata;
}
update("1W6tVuj0krrwI7PyTRJha2ZOX72kGGfFAI8eqXOirWHo");
console.log(prepdata());
I'm writing a small website for a newspaper and I'm trying to make the home page to show the latest news and a photo for each. I use Firebase Realtime Database and Firestorage to store the news and the photos. When getting the data and showing it I save all the data first in an object array and then displaying it (so it remains in order).
The problem is that when I'm calling the function to display it the links to the photos don't appear.
I tried outputting the array with console.log(arrayName) and everything looks like it should. But when I try console.log(arrayName[1].sos) it shows nothing.
db.collection("articole").orderBy("data", "asc").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
articolTmp = {
titlu: doc.data().titlu,
subtitlu: doc.data().subtitlu,
id: doc.id,
poza: doc.data().poza,
data: doc.data().data,
sos: ""
};
articole.push(articolTmp);
});
show();
});
function show(){
for(let i = 1; i < articole.length; ++i){
var pathReference = storage.ref('pozeArticole/' + articole[i].poza);
pathReference.getDownloadURL().then(function(url){
articole[i].sos = url;
});
}
showw();
}
function showw(){
// this is the console.log I was talking about
console.log(articole);
for(let i = 1; i < articole.length; ++i){
console.log(articole[i].sos);
var div = document.createElement("div");
var titlu = document.createElement("h3");
var subtitlu = document.createElement("p");
var link = document.createElement("a");
var poza = document.createElement("img");
poza.src = articole[i].sos;
poza.alt = "alt";
link.href = "viz.html?id=" + articole[i].id;
titlu.innerHTML = articole[i].titlu;
subtitlu.innerHTML = articole[i].subtitlu;
document.getElementById("main").appendChild(div);
link.appendChild(titlu);
div.appendChild(link);
div.appendChild(subtitlu);
div.appendChild(poza);
}
Your problem is in the show function. The last line of code which calls showw is executed before the line "above it" which is articole[i].sos = url;. Why is that? Because you are using an asynchronous operation. The code that gets the download url is executed in a different thread. Whenever that code finished, the block you provided (articole[i].sos = url;) will get executed. I recommend reading about asynchronous operations and promises.
So, to solve your problem, you have ti move the showw call inside the block above it. The block should be:
pathReference.getDownloadURL().then(function(url){
articole[i].sos = url;
showw();
});`
It seems like nothing is stored in the array with this code:
(Assume showList is an actual div id; didn't think it was necessary to include those tags in the code)
var i = 0;
var array = [];
var showList = document.getElementById('showList');
firebase.firestore().collection('TV Shows').get().then(snapshot => {
snapshot.forEach(doc => {
array[i] = doc.data().show.name;
i++;
//console.log(doc.data().show.name);
});
});
showList.innerHTML = array[4];
Funny enough, that commented console.log line works fine and displays all the objects, so I don't understand why I can't store it in the array. A big part of me feels as if it's my direction in using the array and/or i variable, but I tagged it as a firebase/firestore issue as well on the off chance it turns out to be a firebase issue.
If someone could point me in the write direction, I would appreciate it.
.get() is asyncronyous, and at the time you run:
showList.innerHTML = array[4];
array has not been initialized yet.
You either need to use callbacks/promises as mentioned in the linked duplicate, or simply move your call inside the .then() function:
var showList = document.getElementById('showList');
firebase.firestore().collection('TV Shows').get().then(snapshot => {
var array = [];
var i = 0;
snapshot.forEach(doc => {
array[i] = doc.data().show.name;
i++;
//console.log(doc.data().show.name);
});
showList.innerHTML = array[4];
});
I'm fetching the top news from hacker news API which is using firebase. I'm planning to build a progressive web app hence, I'm planning to cache the results into the localstorage.
The current code is here, which fetch and render the top stories. The code is here:
var ref = new Firebase("http://hacker-news.firebaseio.com/v0/");
var itemRef = ref.child('item');
var topStories = [];
var storyCallback = function(snapshot) {
var story = snapshot.val();
var html = '';
if(story.score) {
html = '<i>'+story.score+'</i> '+story.title+''
}
document.getElementById(topStories.indexOf(story.id)).innerHTML = html;
}
ref.child('topstories').once('value', function(snapshot) {
topStories = snapshot.val();
for(var i = 0; i < topStories.length; i++) {
var element = document.createElement("P");
element.id = i;
document.getElementById('items').appendChild(element);
itemRef.child(topStories[i]).on('value', storyCallback);
}
});
ref.child('topstories').on('child_changed', function(snapshot, prevChildName) {
var ref = snapshot.ref()
var index = ref.name();
var oldItemId = topStories[index];
itemRef.child(oldItemId).off();
var newItemId = snapshot.val();
topStories[index] = newItemId
itemRef.child(newItemId).on('value', storyCallback);
});
If I add each stories into the localstorage (by tweaking the above code), how can I skip fetching it from firebase the next time (if it already presents and doesn't changed)?
Note that doesn't change part is important because I can easily get from local storage using the key, how ever it should be in sync with firebase as well. So wondering whether firebase has some way to handle this
If I'm not missing any point you can simply check whether they already exists in local storage or not
if(localStorage.getItem('key')){
//display here
}else{
//fetch
//save for next time
localStorage.setItem('key', JSON.stringify('yourdata'));
//and display here
}
Also you can generalize your function for fetching, display or rendering so you can call at multiple place.
I am having an interesting issue. The general idea of what I am doing is pulling data from a Firebase database, and populating a table based on that data. Everything runs perfectly during initial population--cells and rows are populated as they should be, but the weird issue is that the scripts seem to execute again randomly. I've logged the incoming data to the console, and can see it print twice after some amount of time.
This second execution does not happen if I am to navigate between pages, or reload the page--in either of those cases everything works as it should. The problem SEEMS to happen when I log back into my computer after locking it??? Does anybody have ANY idea what could be going on here? Relevant portion of script below:
const table = document.getElementById('myTable');
firebase.auth().onAuthStateChanged(firebaseUser => {
if (firebaseUser) {
let user = firebase.auth().currentUser;
let uid = user.uid;
const dbRef = firebase.database().ref().child("data/" + uid);
dbRef.once('value', snap => {
var dataCount = snap.child("secondData").numChildren();
var datalist = snap.child("secondData").val();
var dataArray = Object.keys(datalist).map(function(k) {
return datalist[k]
});
pullAllInfo(dataCount, dataArray);
});
}
});
function pullAllInfo(count, array) {
let k = 0;
let dataArray = [];
for (i = 0; i < count; i++) {
let specificRef = firebase.database().ref().child("secondData/" + array[i]);
specificRef.once('value', snap => {
var optionsTag = array[k];
k++;
var dataId = snap.child("id").val();
var dataName = snap.child("name").val();
var dataCount = snap.child("data").numChildren();
dataArray.push(dataId, dataName, dataCount, optionsTag);
if (k == count) {
buildTable(dataArray);
console.log(dataArray);
}
});
}
}
As you can see from the code above I AM calling .once() for each reference, which would prevent data duplication from the typical .on() call. Just cant seem to figure this one out. ALSO I have an iMac, just for anyone curious about my potential computer unlock diagnosis.
Thanks all!
Most likely, the auth state is changing and setting off your function. Try throwing a log under firebase.auth().onAuthStateChanged like this:
firebase.auth().onAuthStateChanged(firebaseUser => {
console.log( 'auth state changed', firebaseUser );
if (firebaseUser) {
My guess is that you'll see that the AuthState is changing when you log out/log in from your computer.
I solved this issue by creating another global boolean called preLoaded. At the beginning, it is set to false and, once the data is loaded and passed off to build the table, it is set to true. It now looks like this:
if(k == count && preloaded == false){
preloaded = true;
console.log(dataArray);
buildTable(dataArray);
}
All set!