Making a Handlebars Template from a Firebase JSON

I have a handlebars template that worked fine using the old fashioned XMLHttpRequest to get the JSON array from https://learnwebcode.github.io/json-example/pets-data.json. Below is the working code for that. But my JSON from Firebase looks different, like this: http://pastebin.com/JaYVVzwN. Every entry of mine also has a key, while the LearnWebCode JSON is just an array. Mine is also missing the parent key (‘Projects’), which further complicates the transition. I’m thinking it might be due to the line with const dbRefObject = firebase.database().ref().child('Projects'); (see the very bottom where I post my attempted javascript)

handlebars-project.js: Old-fashioned XMLHttpRequest

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/pets-data.json');
ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
        var data = JSON.parse(ourRequest.responseText);
        createHTML(data);
    } else {
        console.log("We connected to the server, but it returns an error.");
    }
};

ourRequest.onerror = function () {
    console.log("Connection error");
};

ourRequest.send();

function createHTML (petsData) {
    var rawTemplate = document.getElementById("petsTemplate").innerHTML;
    var compiledTemplate = Handlebars.compile(rawTemplate);
    var ourGeneratedHTML = compiledTemplate(petsData);

    var petsContainer = document.getElementById("pets-container");
    petsContainer.innerHTML = ourGeneratedHTML;
}

And here’s the working HTML/Handlebars code:

card-handlebars.php: Basic template I want to use (it makes a little card. I want a lot of these, one for every item under the Projects key from the Firebase JSON)

Now I want to switch that first handlebars-project.js code over to using firebase instead.

To be clear, I want my page to be populated with a bunch of these cards (I’m using Semantic UI) for every item under the Projects key (Project-1, Project-2, Project-3, etc.) from a single Firebase fetch. It’s already being stringified to JSON. I want the looping to stay in handlebars (HTML), not in the javascript. And this isn’t using Node.js.

Here’s a look at my actual Firebase table:

Firebase
Here’s my attempt at the javascript:

handlebars-firebase-project.js: Not working. This is where the crux of the whole issue is. It should be a simple fix but I’m no JS expert.

(function() {

  // https://www.gstatic.com/firebasejs/3.7.1/firebase.js

  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAC1MEF59loMVRA7zyaMhn6uHrp4i2OPNw",
    authDomain: "website-171c8.firebaseapp.com",
    databaseURL: "https://website-171c8.firebaseio.com",
    storageBucket: "website-171c8.appspot.com",
    messagingSenderId: "642759134369"
  };
  firebase.initializeApp(config);

  //Create references
  const dbRefObject = firebase.database().ref().child('Projects');

  //Sync object changes (HTML)
  dbRefObject.on('value', snap => {

    var rawTemplate = document.getElementById("petsTemplate").innerHTML;
    var compiledTemplate = Handlebars.compile(rawTemplate);
    var ourGeneratedHTML = compiledTemplate(JSON.stringify(snap.val(), null, 3));

    var petsContainer = document.getElementById("pets-container");
    petsContainer.innerHTML = ourGeneratedHTML;

  });

}());


Source: stackoverflow-javascript

firebase async – cant access object data

$('#btn_searchUser').click(function(){
  var emailSearch = $('#txt_searchEmail').val();
  var rootRef = firebase.database().ref('users/');

  rootRef.orderByChild('email').equalTo(emailSearch).once('value').then(function(snapshot){

   displayUserDetails(snapshot);
 }, function(error){
   console.log(error);
 });
});
function displayUserDetails(snapshot) {
var data = snapshot.val();
console.log(data);
}

logging the data logs the object as expected… but data.name or any other method ive tried logs undefined!

Very new to JS so any help is appreciated. Thanks


Source: stackoverflow-javascript