Как я могу получить информацию из Firebase и отобразить ее в таблице HTML, используя JavaScript - PullRequest
Новая
       2

Как я могу получить информацию из Firebase и отобразить ее в таблице HTML, используя JavaScript

0 голосов
/ 12 мая 2019

может кто-нибудь мне помочь, это моя база данных firebase, и я хотел бы получить список пользователей (просто показывающий информацию в данный момент) из базы данных и отобразить его в обычной HTML-таблице, используя JavaScript

https://www.up -00.com / я / 00124 / 7bfnz8c0mt5d.png

Я бы хотел показать таблицу пользователей (имя, фамилия ...)

ОБНОВЛЕНИЕ: Вот код, который я попробовал, но безуспешно: 

<!DOCTYPE html>
<html>
<head>
    <title>Testing a table</title>
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBgXArM80ikVWaTWincfffsYa85I31uf0",
    authDomain: "sosservice-1b5a7.firebaseapp.com",
    databaseURL: "https://sosservice.firebaseio.com",
    projectId: "sosservice-1b5a7",
    storageBucket: "sosservice-1445e.appspot.com",
    messagingSenderId: "1093429197188"
  };
  firebase.initializeApp(config);
</script>
</head>
<body>


<table style="width:100%" id="ex-table">
  <tr id="tr">
    <th>First Name</th>
    <th>Last Name</th> 
    <th>CIN</th>
    <th>Tel</th>
    <th>Pass</th>

 </table> 

<script>
    var database = firebase.database();
    database.ref(users).once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                content +='<tr>';
                content += '<td>' + val.firstName + '</td>';
                content += '<td>' + val.lastName + '</td>';
                content += '<td>' + val.cin + '</td>';
                content += '<td>' + val.numTel + '</td>';
                content += '<td>' + val.pw + '</td>';
                content += '</tr>';
            });
            $('#ex-table').append(content);
        }
    });
</script>
</body>
</html>

1 Ответ

0 голосов
/ 13 мая 2019

Вы не очень далеки от решения с кодом, который вы пробовали!(Я изменил ваш вопрос, чтобы включить этот новый код).

Есть три проблемы:

  1. Видимо, ваш проект Firebase написан неправильно на странице HTML.Вы получите сообщение об ошибке типа "FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly (https://sosservice.firebaseio.com)".
  2. . Делая database.ref(users).once('value', function(snapshot) {}), вы передаете переменным пользователям метод ref(), но users нигде не определен.Вам нужно передать строку 'users' следующим образом: database.ref('users').once('value', function(snapshot) {}).
  3. Выполнение $('#ex-table').append(content); означает, что вы используете знаменитую библиотеку jQuery.Чтобы это работало, вам нужно включить файл jQuery JavaScript на вашей странице.Вы можете загрузить его или указать версию, размещенную в CDN, см. https://jquery.com/download/

Итак, следующий код должен работать, предполагая, что конфигурация Firebase правильно объявлена. 

<!DOCTYPE html>
<html>
  <head>
    <title>Testing a table</title>
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
      // Initialize Firebase
      var config = {
          apiKey: "AIzaSyBgXArM80ikVWaTWincfffsYa85I31uf0",
          authDomain: "sosservice-1b5a7.firebaseapp.com",  //Check here!!
          databaseURL: "https://sosservice.firebaseio.com",
          projectId: "sosservice-1b5a7",
          storageBucket: "sosservice-1445e.appspot.com",
          messagingSenderId: "1093429197188"
      };
      firebase.initializeApp(config);
    </script>
  </head>

  <body>
    <table style="width:100%" id="ex-table">
      <tr id="tr">
        <th>First Name</th>
        <th>Last Name</th>
        <th>CIN</th>
        <th>Tel</th>
        <th>Pass</th>
      </tr>
    </table>

    <script>
      var database = firebase.database();
      database.ref('users').once('value', function(snapshot) {
        if (snapshot.exists()) {
          var content = '';
          snapshot.forEach(function(data) {
            var val = data.val();
            content += '<tr>';
            content += '<td>' + val.firstName + '</td>';
            content += '<td>' + val.lastName + '</td>';
            content += '<td>' + val.cin + '</td>';
            content += '<td>' + val.numTel + '</td>';
            content += '<td>' + val.pw + '</td>';
            content += '</tr>';
          });
          $('#ex-table').append(content);
        }
      });
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...