Получить вложенные объекты JavaScript

Question

Мой объект из Firebase, когда я console.log:

Object {AW: Object, Qdoba: Object} 

Затем под названиями ресторанных AW и Qdoba, у меня есть название и адрес, я могу расширить и видеть в моей консоли. Я хочу показать все данные из обоих ресторанов на моей веб-странице.

Как добраться до двух объектов ресторана, не зная AW и Qdoba? Мой код ниже.

// 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; 
} 

Моя Firebase установка:

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

Answer 1

Пропустите Snapshot себя и использовать его метод forEach для перечисления элементов:

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

Answer 2

Измените JSON, чтобы сделать массив ресторан и каждое имя атрибут. Затем вам не нужно знать имя заведения, чтобы получить доступ к данным.

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

Но если вы не можете сделать это, например, базы данных после SQL не может дать вам массивы обратно, то маленький кусочек сценария с помощью JQuery-функции $ .each могут ходить объекты и вывода массива этих объектов с ключом как атрибутом.

// 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>

Полезные исследования: Статья here оправдывая почему Firebase не возвращают массивы.