Nested Array in Firebase with jQuery/JavaScript

Question

I will be loading information into a JSON file and then importing it into firebase for it to load on my website. I have a sample JSON like this...

{
            "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"
            ]
        }

I have the following code.

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

    }
  });

Everything is fine except for the included portion. Right now, this will print like string1,string2,string3. How would I loop through that array and either print them like..

String 1

String 2

String 3

Or even convert the string values into img. For example, if we offer coffee, or food, it'll be an icon representing that.

Murli Prajapati · Accepted Answer · 2018-11-01 14:22:03Z

1

Iterate over included array and add td to 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);
    }
  });

edited Nov 1, 2018 at 14:22

answered Nov 1, 2018 at 14:14

Murli Prajapati

9,8535 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested Array in Firebase with jQuery/JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related