Firebase pulling specific item in array with JavaScript

Question

I'm trying to make a simple table that is populated by a table I have made in FireBase. I am new to FireBase, I normally work in mySQL and usea combination of php and SQL to pull from the database. My current JSON structure is { "board1" : { "c0" : "0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0", "c1" : "0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0", "c2" : "0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0", "c3" : "0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0", "c4" : "0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0", "c5" : "0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0", "c6" : "0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0", "c7" : "0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0" } } And I'm looking for a way to retrieve the value of specific cells for example c3 and the third item in the array and store it as a javascript variable. Every example I have found on FireBase is complex and broken up. Thanks for your help!

var database = firebase.database();
var i;
var j;
for (i = 0; i < 7; i++) {
    for (j = 0; j < 6; j++) {
	var R = i.toString();
	var C = j.toString();
	var id = C.concat("",R);
	var col = "c"+R
	var x = piece(i,j); 
    document.getElementById(id).innerHTML = x;
	}
	function piece(i,j) {
	var C = j.toString();
	var col = "c"+C
		return database.ref('board1/'col).once('value').then(function(snapshot) {
		  console.log(snapshot.val());
		  var piece = snapshot.val()[i];
		  console.log(piece);
		});
	});      
}
}

Could you detailed, on a more high level view what is your requirement? From where do you get this data? Is it already formatted like that or YOU formatted it like that (e.g. legacy). Which database you plan to use? The Real Time Database or Firestore? — Renaud Tarnec
– Renaud Tarnec, Commented May 16, 2018 at 13:57

Renaud Tarnec · Accepted Answer · 2018-05-16 16:07:14Z

1

If you want to use the Real Time Database you could do something like the following. Just copy paste that in an html page, adapt the config values with the ones of your project, and open it with a browser.

On open, it will write c0 array to the board1 node. Then, manually modify the value of C03 via the console and click on the button "Read data".

So this is a solution. However, you should read this Firebase blog post: https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html

<html>

<head>
  <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-database.js"></script>
</head>

<body>

<button id="myBtn">Read data</button>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: ""
  };
  firebase.initializeApp(config);

  var db = firebase.database();

  var newQuoteKey = db.ref('board1/').push().key;

  var updates = {};
  updates['c0'] = {0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0};

  db.ref('board1/').update(updates);


  document.getElementById("myBtn").addEventListener("click", function(){
    return db.ref('board1/c0').once('value').then(function(snapshot) {
      console.log(snapshot.val());
      var c03 = snapshot.val()[3];
      console.log(c03);
    });
  });

</script>

<body>
</html>

Edit after you edited your Question (code added) and added comments below

I would refactor your code as follows (not tested, just a "high level" refactoring, without all the details):

var database = firebase.database();
var i;
var j;

var promises = [];

for (i = 0; i < 7; i++) {
    for (j = 0; j < 6; j++) {
    var C = j.toString();
    var col = "c" + C;

    promises.push(return database.ref('board1/' + col).once('value'));    

    }    
}

var promiseAll = Promise.all(promises);
promiseAll.then(function(results) {
    //Here, result items in the results array
    //are ordered in the same order they were pushed to the promises array 
    for (index = 0; index < results.length; ++index) {
       console.log(results[index]);
       //Do something with the data
       //You will have to write the correct code to find back the i,j couples
    }
})

edited May 16, 2018 at 16:07

answered May 16, 2018 at 14:36

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

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

3 Comments

Eduard Anghelescu Over a year ago

Hi Renaud, I have added my attempt to implement your solution into my code. I am not getting anything to populate the table.

Renaud Tarnec Over a year ago

Try return database.ref('board1/' + col).once('value').then(function(snapshot) { in your update code. The paralmeter passed to the ref() method shall be a string.

Renaud Tarnec Over a year ago

Also, in your updated code, take care that once is an asynchronous function returning a promise (see firebase.google.com/docs/reference/js/…). So declaring all the calls within a loop like you do may generate some problems or inconsistencies. Better use Promise.all().

Collectives™ on Stack Overflow

Firebase pulling specific item in array 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