檢索嵌套對象的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理由爲什麼火力地堡不返回數組。