对于 DOM 元素，Firebase object 将 child_changed 返回到 object

Question

在一个 firebase 项目上工作，我在其中获取有关我放入变量的 child_changed 事件的数据。

receipeList = childSnapshot.child('meals/0').val()

在控制台中，根据我的 FB 中的数据，我得到了 2 objects。

我的问题是，如何在列表或 table 中获取这些数据（DOM 中的任何简单内容）？迭代如下：

   for(var key in receipeList) {
    var val = receipeList[key];
    var $currentRecipe = $('#contentRecipe');
    $currentRecipe.prepend(
     '<div class="row"><div class="col-md-4" id=' + key + '>' + key + '</div>'         + '<div class="col-md-4">' + val +
    '</div>' 
    );
    $currentRecipe.append(
    '</div>'
    );
   };

这将获取键和值。最好我只希望键一次（如 headers / 顶层列表）并列出每个键的相关值。喜欢：

Product | Supplier | {etc}
--------------------------
Appel   | Tree     | ...

Water   | Source   | ...

非常感谢帮助。很抱歉，如果我错过了很明显的地方，但我确实已经完成了无数次 tuts，当然还有 questions/answers 这里。

顺便说一句，我没有（也不想这样做）与 PHP 合作。我的项目完全是在 Firebase 数据库上使用 HTML、CSS 和 JS 构建的。到目前为止已经实施了相当多的项目，包括 DataTables.js。只是这在某种程度上是我无法粘贴的障碍。非常感谢帮助，因为我只是认为自己的 JS 是一种职业转变。

Answer 1

也许是这样的？

var receipeList = {key1: "value1", key2: "value2"};

for(var k in receipeList){
    //dynamically create list if not already exists
    if( $("#"+k).length === 0 )
        $("<ul id='"+k+"'>'"+k+"'</ul>").appendTo("body");

    $("<li>"+receipeList[k]+"</li>").appendTo("#"+k);
}

simple DEMO 和 multiple objects DEMO

对于 DOM 元素，Firebase object 将 child_changed 返回到 object

Firebase object returned child_changed into object for DOM element

html

javascript

jquery

datatables

firebase