從Firebase解析JSON對象並使用鍵值對生成內容

我已經使用Firebase設置了一個數據庫，並且使用JSON信息填充了它。我擁有直接從Firebase文檔獲取的代碼，可以對我的數據進行快照並實時更新。這是偉大的我需要什麼，但我也需要訪問我的JSON的值，以類似地生成的內容列表，以這樣的：從Firebase解析JSON對象並使用鍵值對生成內容

var JSONStuff = json info on database 
for (every array in the JSON) 
{ 
    //MAKE THINGS 
}

我通常用PHP腳本和SQL數據庫，做到這一點，但我使用Firebase的第一次，我不知道我做錯了什麼。這是我到目前爲止。

的JavaScript：

var display = document.getElementById("resultsDisplay"); 
var dbRef = firebase.database().ref().child("workouts"); 
// Sync with Firebase in real time. 
dbRef.on("value", snap => 
{ 
    //display.innerHTML = JSON.stringify(snap.val(), null, 3); This correctly prints my JSON. 
    JSON.stringify(snap.val(), null, 3); 
}); 

JSON.parse(dbRef) //Trying to parse the JSON and do things with it. 
{ 
    for (var i = 0, len = dbRef.length; i < len; i++) 
    { 
    display.innerHTML = 'Routine: ' + dbRef.title + ' Exercises: ' + dbRef.name + '.'; 
    } 
};

HTML：

<div id="resultsDisplay">boo</div>

控制檯給我「未捕獲的SyntaxError：意外的標記的H JSON」的錯誤，我知道意味着有雙引號搞亂我的解析器的某處，但正如你所看到的，我沒有在函數中使用它們。

我是一個noob，因此可能做的事情完全愚蠢，但任何幫助將不勝感激。

來源

2017-10-16 Brian

您正試圖'JSON.parse'數據庫引用，而不是值。你需要在'.on（'value'）'回調內部操作，並且爲你的JSON使用'snap.val（）'，而不是'dbRef'。 –

謝謝，這是有道理的。但是，我所取得的所有成就都是擺脫了控制檯錯誤，沒有其他任何顯示。我認爲我錯誤地引用了key：value對。 – Brian

當前，您正試圖解析數據庫引用dbRef而不是數據本身。

試着這樣做：

var display = document.getElementById("resultsDisplay"); 
var dbRef = firebase.database().ref().child("workouts"); 

// Sync with Firebase in real time. 
dbRef.on("value", snap => { 
    var workoutsJSON = JSON.stringify(snap.val(), null, 3); 

    JSON.parse(workoutsJSON) { 
    for (var i = 0, len = dbRef.length; i < len; i++) { 
     display.innerHTML = 'Routine: ' + dbRef.title + ' Exercises: ' + dbRef.name + '.'; 
    } 
    }; 
});

只給你一個想法。

來源

2017-10-16 20:57:52 Orlandster

謝謝你的回答，如果我實現你的代碼，控制檯不顯示任何錯誤，但同時div不會更新，也不會顯示任何內容。我認爲這是我如何在數據庫中引用鍵值對的問題。 – Brian

更新：問題不在於引用鍵：值對。我把我的JSON轉換成一個JS變量，並通過它進行解析，然後能夠打印單個值，但不能循環遍歷它們（所以我必須在for循環中做一些錯誤）。然後我嘗試使用你的代碼從服務器打印相同的信息，它返回'undefined'並且沒有控制檯錯誤。 – Brian

@Brian是否可以創建一個plunkr？那麼我會在幾分鐘內解決您的需求。 – Orlandster

從Firebase解析JSON對象並使用鍵值對生成內容

回答

相關問題