使用 jQuery/JavaScript 在 Firebase 中嵌套数组答案

【问题标题】：Nested Array in Firebase with jQuery/JavaScript使用 jQuery/JavaScript 在 Firebase 中嵌套数组
【发布时间】：2018-11-01 23:27:40
【问题描述】：

我会将信息加载到 JSON 文件中，然后将其导入 firebase 以将其加载到我的网站上。我有一个这样的示例 JSON...

{
            "date": "date of event",
            "title": "title of event",
            "address": "address",
            "city": "city of event",
            "state": "HI",
            "zip": "11111",
            "available": true,
            "cost": "$60",
            "included": [
                "string1",
                "string2",
                "string3"
            ]
        }

我有以下代码。

 database.ref().child('events').once('value', function(snapshot) {
    if (snapshot.exists()) {
      var content = '';
      snapshot.forEach(function(child) {
        var val = child.val();
        content +='<tr>';
        content += '<td>' + val.date + '</td>';
        content += '<td>' + val.title + '</td>';
        content += '<td>' + val.address + '</td>';
        content += '<td>' + val.city + '</td>';
        content += '<td>' + val.state + '</td>';
        content += '<td>' + val.zip + '</td>';
        content += '<td>' + val.cost + '</td>';
        content += '<td>' + val.included + '</td>';
        content += '</tr>';
            });
            $('#ex-table').append(content);

    }
  });

一切都很好，除了包含的部分。现在，这将打印为string1,string2,string3。我将如何遍历该数组并像打印它们一样..

字符串 1

字符串 2

字符串 3

甚至可以将字符串值转换为 img。例如，如果我们提供咖啡或食物，它将是一个代表它的图标。

【问题讨论】：

标签： javascript jquery firebase firebase-realtime-database

【解决方案1】：

遍历包含的数组并将td 添加到content。

database
  .ref()
  .child('events')
  .once('value', function(snapshot) {
    if (snapshot.exists()) {
      var content = '';
      snapshot.forEach(function(child) {
        var val = child.val();
        content += '<tr>';
        content += '<td>' + val.date + '</td>';
        content += '<td>' + val.title + '</td>';
        content += '<td>' + val.address + '</td>';
        content += '<td>' + val.city + '</td>';
        content += '<td>' + val.state + '</td>';
        content += '<td>' + val.zip + '</td>';
        content += '<td>' + val.cost + '</td>';
        val.included.forEach((s) => {
          content += '<td>' + s + '</td>';
        });
        content += '</tr>';
      });
      $('#ex-table').append(content);
    }
  });

【讨论】：