javascript - Firebase 对象返回 child_changed 为 DOM 元素的对象

Question

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

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

在控制台中，根据我的 FB 中的数据，我按预期获得了 2 个对象。

我的问题是，如何在列表或表格中获取这些数据(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>'
    );
   };

这将获取键和值。最好我只希望键一次(作为标题/顶层列表)并列出每个键的相关值。喜欢:

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

Water   | Source   | ...

非常感谢帮助。很抱歉，如果我遗漏了一些显而易见的东西，但我确实已经完成了无数的 tuts，当然还有这里的问题/答案。

顺便说一句，我没有(也不想)使用 PHP。我的项目完全是用 HTML、CSS 和 JS 在 Firebase 数据库上构建的。到目前为止已经实现了相当多的项目，包括 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