CODEWITHSUNDEEP
javascriptjsonfirebasefirebase-realtime-database
Eduard Anghelescu
Eduard Anghelescu

Reputation: 75

Firebase pulling specific item in array with JavaScript

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);
		});
	});      
}
}

Upvotes: 0

Views: 38

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83163

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
    }
})

Upvotes: 1

Related Questions