從Firebase JSON製作把手模板

我有一個可以使用舊式XMLHttpRequest從https://learnwebcode.github.io/json-example/pets-data.json獲取JSON數組的工作正常的把手模板。以下是該工作代碼。但是我的Firebase JSON看起來不同，如下所示：http://pastebin.com/JaYVVzwN。我的每個條目都有一個鍵，而LearnWebCode JSON只是一個數組。礦山也缺少父項（'項目'），這進一步複雜化了過渡。我想這可能是由於與const dbRefObject = firebase.database().ref().child('Projects');線（見最底部，我後我嘗試的JavaScript）從Firebase JSON製作把手模板

車把project.js：老式的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; 
}

而這裏的工作HTML /把手代碼：

卡handlebars.php：基本模板，我想用（它使一個小小的卡片我想了很多，這些，一個從火力地堡的項目項下的每個項目JSON）

<div class="ui stackable cards" id="pets-container"></div> 

<script id="petsTemplate" type="text/x-handlebars-template"> 
{{#each pets}} 
<div class="ui red card" id="ui_card"> 
    <div class="content"> 
     <div class="right floated header"> 
      {{species}} 
     </div> 
     <div class="header"> 
      <p>{{name}}</p> 
     </div> 
    </div> 
    <div class="content">  
     <div class="description"> 
      <a href="project_details.php"> 
      Description goes here. Some lorem ipsum should be fine here for now. Lorem ipsum dolor mit aset. Lorem ipsum dolor mit aset. Lorem ipsum dolor mit aset. Lorem ipsum dolor mit aset. 
      </a>  
     </div> 
    </div> 
    <div class="extra content"> 
     <span class="right floated" id="card_weeks_ago"> 
      2 weeks ago 
     </span> 
     <img class="ui avatar image" src="/examples/assets/images/avatar/elliot.png"> Elliot Fu 
    </div> 
</div> 
{{/each}} 
</script>

現在我想將第一個handlebars-project.js代碼轉換爲使用firebase代替。

爲了清楚起見，我希望我的頁面在項目鍵（Project-1，Project-2，Project-3等）下面的每個項目都填充一堆這些卡片（我使用語義UI））來自單個Firebase提取。它已經被串化爲JSON。我希望循環留在句柄（HTML）中，而不是在JavaScript中。這不是使用Node.js.

下面就來看看我的實際火力地堡表：

這是我嘗試在JavaScript的：

車把火力-project.js：不工作。這是整個問題的癥結所在。這應該是一個簡單的修復，但我不是JS專家。

(function() { 

    // <script src="https://www.gstatic.com/firebasejs/3.7.1/firebase.js"></script> 

    // 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; 

    }); 

}());

來源

2017-03-10 FiringBlanks

您的firebase數據的形狀與「寵物」數據不同。（假設compiledTemplate需要數組參數）

firebase結果是一個對象，而寵物是一個數組。

模板#each幫助程序期待數組遍歷。

可以轉換火力目標結果的數組：

var dataObj = snap.val() 
var dataArray = Object.keys(dataObj).map(function(key) { 
    return dataObj[key] 
}) 
var ourGeneratedHTML = compiledTemplate(dataArray);

此外，你需要更新模板在你的火力點數據使用的實際性能，而不是「寵物」的數據。

如果您需要引用對象標識（例如，Project-2）的模板，你可以這樣做：

return Object.assign({}, dataObj, {id: key})

從dataObj只是複製屬性到一個新的{}對象，並添加id領域也是如此。

這是一個很好的javascript參考：

2017-03-15 06:00:14 cdock

從Firebase JSON製作把手模板

回答

相關問題