Retrieve nested objects JavaScript

Question

My object from Firebase when I console.log:

Object {AW: Object, Qdoba: Object}

Then under the restaurant titles of AW and Qdoba, I have title and address which I can expand on and see in my console. I am wanting to display all the data from both restaurants in my webpage.

How do I access the two restaurant objects without knowing the AW and Qdoba? My code below.

// Initialize Firebase
var config = {
  apiKey: "xxxxxxxx",
  authDomain: "xxxxxxxx",
  databaseURL: "xxxxxxxx",
  storageBucket: "xxxxx.xxxxxx.com",
  messagingSenderId: "xxxxx"
};

firebase.initializeApp(config);

var firebaseRef = firebase.database().ref('listings/');

//load 
firebaseRef.on("value", function(snapshot) {
  document
    .querySelector('#contacts')
    .innerHTML += contactHtmlFromObject(snapshot.val());
});

//prepare object's HTML
function contactHtmlFromObject(item){
  console.log(item)
  var html = '';
  html += '<li class="list-group-item contact">';
    html += '<div>';
      html += '<p class="lead">'+item.title+'</p>';
      html += '<p>'+item.title+'</p>';
      html += '<p><small title="'
                +item.title+'">'
                +item.address
                +'</small></p>';
    html += '</div>';
  html += '</li>';
  return html;
}

My Firebase setup:

 {
  "listings" : {
    "A&W" : {
      "active" : true,
      "address" : "3939",
      "description" : "Super good root beer",
      "title" : "A&W"
    },
    "Qdoba" : {
      "active" : true,
      "address" : "1234 main",
      "description" : "A really good place to eat",
      "title" : "Gellas"
    }
  }
}

for (var restaurant in object.listings)

Barmar
– Barmar

2017-01-05 23:59:46 +00:00
Commented Jan 5, 2017 at 23:59 — Barmar
– Barmar, Commented Jan 5, 2017 at 23:59

cartant · Accepted Answer · 2017-01-06 00:00:26Z

1

Pass the Snapshot itself and use its forEach method to enumerate the items:

firebaseRef.on("value", function(snapshot) {
  document
    .querySelector('#contacts')
    .innerHTML += contactHtmlFromObject(snapshot);
});

function contactHtmlFromObject(snapshot) {
  var html = '';
  snapshot.forEach(function (itemSnapshot) {
    var key = itemSnapshot.key; // This is "A&W" or "Qdoba", etc.
    var val = itemSnapshot.val();
    html += '<li class="list-group-item contact">';
      html += '<div>';
        html += '<p class="lead">'+val.title+'</p>';
        html += '<p>'+val.title+'</p>';
        html += '<p><small title="'
                  +val.title+'">'
                  +val.address
                  +'</small></p>';
      html += '</div>';
    html += '</li>';
  });
  return html;
}

answered Jan 6, 2017 at 0:00

cartant

58.6k17 gold badges169 silver badges201 bronze badges

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

Comments

Vanquished Wombat · Accepted Answer · 2017-01-06 10:11:03Z

1

Modify your JSON to make a restaurant array and each name an attribute. You then do not need to know the establishment name in order to access the data.

 {
  "listings" : [
    {          
      "name" : "A&W",
      "active" : true,
      "address" : "3939",
      "description" : "Super good root beer",
      "title" : "A&W"
    },
    {
      "name" : "Qdoba",
      "active" : true,
      "address" : "1234 main",
      "description" : "A really good place to eat",
      "title" : "Gellas"
    }
  ]
}

But if you can't do that, for example post-SQL databases may not give you arrays back, then a small piece of script using JQuery-function $.each can walk the objects and output an array of those objects with the key as an attribute.

// this simulates the data being called in via ajax etc.
var data=JSON.parse(' {  "listings" : {    "A&W" : {      "active" : true,      "address" : "3939",      "description" : "Super good root beer",      "title" : "A&W"    },    "Qdoba" : {      "active" : true,      "address" : "1234 main",      "description" : "A really good place to eat",      "title" : "Gellas"    }  }}')

// make a new array to receive the objects
var arr = []
$.each(data.listings, function (key, data) {
    data.name = key // put the object key inside the object as paramater 'name'
    arr.push(data) // put the object into the array
})

// At this point we have an array of objects to do with as we wish.

// Output in readable form.
$("#jsonout").html(JSON.stringify(arr, undefined, 2))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="jsonout"></pre>

Useful research: Article here justifying why Firebase does not return arrays.

edited Jan 6, 2017 at 10:11

answered Jan 6, 2017 at 0:03

Vanquished Wombat

9,6037 gold badges39 silver badges81 bronze badges

2 Comments

cartant Over a year ago

Unfortunately, Firebase does not store arrays. Arrays written to the Firebase database are converted to objects with keys that correspond to the array's indices.

Vanquished Wombat Over a year ago

@cartant I updated my answer in light of your comment. You can run the code snippet to see that the result is as per my suggested array idea.

Collectives™ on Stack Overflow

Retrieve nested objects JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related