Firebase에서 HTML 페이지로 데이터를 가져 오는 방법은 무엇입니까?

Question

사용자 입력으로 name 및 email을 취하는 간단한 사용자 등록 웹 응용 프로그램을 개발 중입니다. 온라인 데이터 저장소로 Firebase을 사용했습니다. (JQuery와 사용)

databaseRef.orderByKey() 
    .once('child_added', function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 

     var childKey = childSnapshot.key; 
     var childData = childSnapshot.val(); 

     console.log("Key: " + childKey + "; Value: " + childData); 

     $('#nameValue').text(childData); 
     $('#emailValue').text(childData); 
    }); 
    }); 

HTML 코드 : 자바 스크립트 파일

<div class="table-responsive"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Email</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td id='nameValue'></td> 
        <td id='emailValue'></td> 
       </tr> 

      </tbody> 
     </table> 
    </div> 
    </div> 

이 중포 기지 내 데이터베이스 구조입니다.

users 
    | 
    -KhyubUqLRGUGW-rtija 
     |--- email: "p1@gmail.com" 
     |--- name: "p1" 

브라우저 콘솔에서이 값을 얻을 수 있습니다.

Key: email; Value: p1@gmail.com 
Key: name; Value: p1 

하지만 HTML 페이지에 표시 할 수 없습니다. 내 HTML 페이지에 내용을 표시하기 위해 JQuery 함수를 수행 할 수있는 작업.

세부 사항을 제출할 때 나타나는 현재 출력물입니다.

Answer 1

첫째

$('#nameValue').append(childKey); 
$('#emailValue').append(childData); 

대신 .text()로

$('#nameValue').text(childKey); 
$('#emailValue').text(childData); 

가 전화 할 때마다 그것은 당신이를 추가한다 무엇을 필요로 이전 데이터를 무시 즉 텍스트를 대체 사용 데이터를 이전 데이터로 변환합니다.

두 번째로 실수로 테이블에 데이터를 추가하는 중입니다. 당신이해야 할 것은 :

$("#data").append('<tr><td>' + childKey + '</td><td>'+ childData+'</td></tr>'); 

하면 업데이트 된 HTML 코드 : 나는 그것 때문에 잘못된 HTML 테이블 구조 초래 추가 후 .. 라인을 제거한

<div class="table-responsive"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Email</th> 
       </tr> 
      </thead> 

       <tbody id="data"> <!-- changed --> 

      </tbody> 
     </table> 
    </div> 
    </div> 

알 수 있습니다. 이것은 당신이 W3school example 은 지금, 당신은 당신의 데이터베이스에있는 keys를 지정할 수 테이블 컬럼하는 대신 테이블의 <th> 고정 값을 하드 코딩의

Answer 2

에 제대로 추가합니다 원하는 구조입니다. 테이블의 데이터로도 동일한 작업을 수행 할 수 있습니다. 즉 values을 해당하는 keys에 각각 할당합니다.

이에 HTML 코드를 수정 : 당신이 당신의 중포 기지에서 데이터를 얼마나

<div class="table-responsive"> 
    <table class="table"> 
    <thead> 
     <tr id="keysRow"></tr> 
    </thead> 
    <tbody> 
     <tr id="valuesRow"></tr> 
    </tbody> 
    </table> 
</div> 

이입니다.

databaseRef 
    .once('child_added', function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 

     var childKey = childSnapshot.key; 
     var childData = childSnapshot.val(); 

     console.log(childKey + " - " + childData); // Displays key with its value in your Browser Console 

     $('#keysRow').append('<th>' + childKey + '</th>'); 
     $('#valuesRow').append('<td>' + childData + '</td>'); 

    }); 
    });