Having trouble with firebase and datatables

davidCoughlan10

I'm having trouble getting my data from firebase to display on my table. I tried it with a JSON object and the table had object,Object. I then tried with ["Test1", "test2", "test3", "test4"] and this worked. I had tried writing the data into a string and then parsing it to Json. I'm just unable to get my data to fit that format. I'm struggling with it and would appreciate any help possible I left in some of my attempts for context. Thanks in advance.

Below is my code:

JavaScript:
var categories = 0; //Number of groupings of locations
var locations = 0; // Number of logged locations in the database
var content = ""; // List of all the rooms names logged in the database
var floorLevel = "";
var tempJsonString = "[";
var array = [];

var jsonData = [];

var ref = firebase.database().ref();
ref.on("value", function (snapshot) {
snapshot.forEach(function (block) {
//count the number of categories
if (block.key !== null) {
categories++;
}

    block.forEach(function (floor) {
        floorLevel = floor.key;
        floor.forEach(function (room) {
            if (room.exists()) {
                locations++;
                var roomName = room.key;
                //tempJsonString += "["+"\""+ locations +","" roomName + "\",\"" +"floor"+"\":\"" + floorLevel +"\","+"\"date"+"\":\"" +"Date\"" +"],";
            }
        });
    });
});


tempJsonString = tempJsonString.substring(0, tempJsonString.length - 1);
tempJsonString += "]";
console.log(tempJsonString);
//jsonData.push(JSON.parse(tempJsonString));

//alert(jsonData);

var test = [
    ["\"" + locations + "\"", "\"" + roomName + "\"", "\"" + floorLevel + "\"", "\"" + date + "\""],
    ["Test1", "test2", "test3", "test4"]
];

$(document).ready(function () {

    $('#room-table').DataTable({
        data: test,
        columns: [{title: "Number"},
            {title: "Name"},
            {title: "Floor"},
            {title: "Date"}
        ]
    });
});

//sets the tile for categories with an updated value
document.getElementById("categories-count").innerHTML = categories;
//sets the tile for locations with an updated value
document.getElementById("locations-count").innerHTML = locations;

});

kthorngren

Have a look through this doc:
https://datatables.net/manual/data/#Data-source-types

It will show you the format of both array based data and object based data. Also this example may help you with array based data:
https://datatables.net/examples/data_sources/js_array.html

Please post any questions.

Kevin

davidCoughlan10

Thanks. I followed the second one and got it working with the example I have in my post but I couldn't get it working with the firebase data. I don't know how to add the data to the array since its a dynamic amount but has the same number of columns.

kthorngren

What does your firebase data look like? Please post an example.

Kevin

davidCoughlan10

Here you go.

davidCoughlan10

Here is what I had been put on the table as a string before I was trying to convert it.
The four columns are Number, Name, Floor, and Date.

[
["1", "A123", "1 Floor", "DATE"],
["2", "B123", "1 Floor", "DATE"],
["3", "B214", "2 Floor", "DATE"],
["4", "C127", "1 Floor", "DATE"],
["5", "C129", "1 Floor", "DATE"],
["6", "C216", "2 Floor", "DATE"],
["7", "D112", "1 Floor", "DATE"],
["8", "D166", "1 Floor", "DATE"],
["9", "D213", "2 Floor", "DATE"],
["10", "D233", "2 Floor", "DATE"],
["11", "D333", "3 Floor", "DATE"],
["12", "D334", "3 Floor", "DATE"],
["13", "D456", "4 Floor", "DATE"],
["14", "F123", "1 Floor", "DATE"],
["15", "T123", "1 Floor", "DATE"],
["16", "Z126", "1 Floor", "DATE"]
]

kthorngren

I'm not familiar with Firebase. Is the data retuned to your script as JSON?

I guess the question is what is an example of the data returned from Firebase to your script? Seems like it might be object based. If object based then you probably will need something like this example (but without the ajax config):
https://datatables.net/examples/ajax/deep.html

What do you want to display from the data?

Kevin