Firebaseのデータ検索が機能していません

Firebaseデータベースのすべてのエントリを取得して、HTMLページを読み込もうとしましたが、それを把握することができませんでした。私は多くのチュートリアルとFirebaseのdocに従っていますが、私のコードは何とかHTMLページを変更していないので、コンソールにエラーは表示されません。Firebaseのデータ検索が機能していません

基本的に私が持っているものは、DB内のジョブエントリのリストです。これらのジョブエントリを下の図の形式で投稿する必要があります。

だから、例えば私は私のFirebaseDB

で、この多くのジョブ・エントリを持っている私は、それぞれの情報に、新たなエントリがされているときに、これらすべてのエントリおよびディスプレイ4枚のカードを取得したいですそれらがディスプレイに追加されます。今、私のコードは動作していないので、私は理由を理解できません。どんな助けでも大歓迎です。

<div class="row" id='Card'> 
<article class="col-xs-4"> 
    <div class="cards"><span class="glyphicon glyphicon-flash icon"></span> 
    <hr class="divider"/> 
    <h2 class="title" id="jobTitle">Job Title</h2> 
    <div class="info"> 
     <hr class="divider"/> 
     <p class="lead" id="jobDescription"><Strong>This is where Job description goes</strong></p><a class="btn btn-lg center-block" onclick="location.href = 'Specialistscard.html';">Specialists</a> 
    </div> 
    </div> 
</article> 



var jobTitle = document.getElementById('jobTitle'); 
var jobDescription= document.getElementById('jobDescription'); 

database = firebase.database(); 

var ref = database.ref('Jobs'); 
ref.on('value', gotData, errData); 


function gotData(data) { 
    console.log(data); 

    var jobs = data.val(); 
    var keys = Object.keys(jobs); 

    for (var i = 0; i < keys.length; i++) { 
    var k = keys[i]; 
    jobTitle = jobs[k].JobTitle; 
    jobDescription = jobs[k].JobDescription; 

    var li = document.createElement('card', jobTitle, jobDescription) 

    } 
} 

function errData(err) { 
    console.log('Error!'); 
    console.log(err); 
}

出典

2017-02-13 Ola

例のように、あなたのhtmlでこの<div id="jobsContainer"></div>を追加してください文字列を要素に割り当てると思う場合、正しい形式は次のようになります： 'jobTitle.innerHTML = jobs [k] .JobTitle;' An d 'jobDescription.innerHTML = jobs [k] .JobDescription;' – JoxieMedina

@DarwinMedinaありがとうございます！ 1つのエントリだけが表示されますが、DB内の他のすべてのエントリについて、そのカードを複製する方法を知っていますか？ – Ola

DBのすべてのエントリではない最新のエントリを表示するだけです – Ola

[OK]を@Olaこれはあなたにも、あなたがHandleBarsは、DOMを操作し、他の多くの機能を持っているJSライブラリでチェックアウトすることができ、javascriptを介して、あなたのhtmlを読み込むことができますどのように例です。

おはようございます！あなたのケースでは

var dummyDataJobs = [ 
 
    { 
 
     title: 'CEO', 
 
     description: 'CEO Description' 
 
    }, 
 
    { 
 
     title: 'CTO', 
 
     description: 'CTO Description' 
 
    }, 
 
    { 
 
     title: 'VP', 
 
     description: 'VP Description' 
 
    } 
 
] 
 
var container = document.getElementById('jobsContainer'); 
 
for (var index = 0; index < dummyDataJobs.length; index++) { 
 
    var job = dummyDataJobs[index]; 
 
    var newCard = ` 
 
<div class="row" id='Card'> 
 
<article class="col-xs-4"> 
 
    <div class="cards"><span class="glyphicon glyphicon-flash icon"></span> 
 
    <hr class="divider"/> 
 
    <h2 class="title">`+ job.title + `</h2> 
 
    <div class="info"> 
 
     <hr class="divider"/> 
 
     <p class="lead"><Strong>`+ job.description + `</strong></p><a class="btn btn-lg center-block" onclick="location.href = 'Specialistscard.html';">Specialists</a> 
 
    </div> 
 
    </div> 
 
</article>`; 
 

 
    container.innerHTML += newCard; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<div id="jobsContainer"></div> 
 
</body> 
 
</html>

あなたはサイクルのために次のことを試すことができます。

var container = document.getElementById('jobsContainer'); 
for (var i = 0; i < keys.length; i++) { 
var k = keys[i]; 
var newCard = ` 
     <div class="row" id='Card'> 
     <article class="col-xs-4"> 
     <div class="cards"><span class="glyphicon glyphicon-flash icon"> </span> 
      <hr class="divider"/> 
      <h2 class="title">`+ jobs[k].JobTitle + `</h2> 
      <div class="info"> 
      <hr class="divider"/> 
      <p class="lead"><Strong>`+ jobs[k].JobDescription + 
      `</strong></p><a class="btn btn-lg center-block" onclick="location.href = 'Specialistscard.html';">Specialists</a> 
      </div> 
     </div> 
     </article>`; 

container.innerHTML += newCard;}//END OF FOR

私はこんにちは、

出典

2017-02-13 01:51:22 JoxieMedina

@Ola私はちょうど答えを編集しました、それが動作するかどうかをお知らせください – JoxieMedina

ありがとう、私の友人、 – Ola

@Olaあなたは大歓迎です、挨拶 – JoxieMedina

Firebaseのデータ検索が機能していません

答えて

関連する問題