检索嵌套对象的JavaScript

Question

从火力地堡我的目标，当我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; 
} 

我的火力地堡设置：

{ 
    "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的功能$。每次可以走对象和输出数组一小块脚本这些对象的关键字是属性。

// 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理由为什么火力地堡不返回数组。