CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-database
katy.2000
katy.2000

Reputation: 11

Pulling data from Firebase Realtime Database

I am trying to pull data from my Realtime database in the form of a list that i can style into a leader board but am having issues with connecting it. The errors showing up are that document.getElementById is not a function and that window.onload(FetchAllData()); is not a function

This is the layout of my database: how my database looks

This is my javascript=

function addItemsToList(name, score){
  var ul=document.getElementsById('highScoresList');
  var header= document.createElement('h2');

  var header= document.createElement('li'); //the number of highscores shown
  var header= document.createElement('li');
  var header= document.createElement('li');
  var header= document.createElement('li');
  var header= document.createElement('li');
  var header= document.createElement('li');
  var header= document.createElement('li');
  var header= document.createElement('li');
  var header= document.createElement('li');
  var header= document.createElement('li');

  header.innerHTML= 'Highscores-'+ (++scores)

  _name.innerHTML='Name: '+name;
  _score.innerHTML='Score: '+score;

  ul.appendChild(header);
  ul.appendChild(_name);
  ul.appendChild(_score);
}


//calls for the data from database
function FetchAllData(){
  firebase.database().ref('scores').once('value', function(snapshot){//a snapshot is a picture of the data at a particular database reference at a single point in time
    snapshot.forEach(
      function(ChildSnapshot){
        let name= ChildSnapshot.val().name;
        let score= ChildSnapshot.val().score;
        addItemsToList(name,score);
      }
    )
  })
}

window.onload(FetchAllData());
<div class="container">
      <div id="highScores" class="flex-center flex-column">
        <h1 id="finalScore">High Scores</h1>
        <ul id="highScoresList">

        </ul>
        <a class="btn" href="home.html">Go Home</a>
      </div>
    </div>

I want to be able to pull the username and score into a table that orders them in terms of their score going from highest to lowest.

I also want to know if it is possible to create multiple arrays of data for different sections. Currently this is only showing the user score for a maths quiz but i want to keep the scores and user name for two different quizzes in the same place, is it possible for me to do this or do i need to have them in different databases?

Upvotes: 1

Views: 65

Answers (1)

Nimna Perera
Nimna Perera

Reputation: 1065

You have syntax errors in your js code. That's why the above mentioned errors had occurred.

The first line of function addItemsToList should be changed like this.

var ul=document.getElementById('highScoresList');

It is not getElementsById. It is getElementById. s should be removed from the funtion.

And you cannot call functions on window.onload like this. (Refer this link) Use the following instead.

window.onload = () => FetchAllData();

or

window.onload = () => {
    console.log('Onload function called');
    FetchAllData();
}

Upvotes: 1

Related Questions