CODEWITHSUNDEEP
javascriptjsonfirebasefirebase-realtime-database
mav-raj
mav-raj

Reputation: 771

Javascript : Save JSON data to firebase database

I have an object with JSON like string which is returned by a function tableToJson(). This is what it looks like.

{
{"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"},
{"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"},
{"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"},
{"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"}
}

How to save this on firebase database. I am already saving some data above it with JS looks like this:

var databaseRef = firebase.database().ref('Bills');
function submitData(e){
e.preventDefault();
//variables for getting all values 
var receiptDate = document.getElementById('date').innerHTML;
var receiptTime = document.getElementById('time').innerHTML;
var receiptBillNo = getInputValues('billNo');
var receiptCompName = getInputValues('companyName');
var receiptEmail = getInputValues('email');
var receiptPhone = getInputValues('phone');
var discount = getInputValues('Discount');
var total = getInputValues('sumTotal');

var newDataref = databaseRef.push();
var itemsJson = tableToJson();//THIS WILL RETURN THE ABOVE JSON STRING
//itemsJson = tableToJson();
//JSON.parse(itemsJson);

newDataref.set({

    date: receiptDate,
    time: receiptTime,
    billNo: receiptBillNo,
    company: receiptCompName,
    email: receiptEmail,
    phone: receiptPhone,
    discount: discount,
    total:total,
    zitems: itemsJson

});
}

why it is saving as string.

Have look at my tableToJson()

function tableToJson(){
    var tableId = document.getElementById('dataEntryTable');
    var headName; 
    var headers = [];
    var dataArray = [];
    var rowCount = tableId.rows.length;
    var colCount = tableId.rows[0].cells.length;

    dataArray.push("[");
    for(var i = 1; i < colCount; i++){
        headName = tableId.rows[0].cells[i].innerHTML;
        headers.push(headName);
    }
    console.log(headers);
    for(var i = 1; i < rowCount; i++){
        dataArray.push("\n{");
        //FOR FIRST APPROACH:dataArray.push("\n/"" + i + "/" :{");
        for(var j = 1; j < colCount; j++){
            var currValue = tableId.rows[i].cells[j].childNodes[0].value;
            dataArray.push("\"" + headers[j-1] + "\":" + "\"" + currValue + 
            "\"");
            if(j < (colCount - 1)){
                dataArray.push(",");
            }
        }
        if( i < (rowCount - 1)){
            dataArray.push("},");
        }
        else{
            dataArray.push("}/n");
        }
    }
    dataArray.push("]");
    return dataArray.join("");
}

Is something wrong with this code. Even if I parse it to JSON it is sending as string.

Upvotes: 1

Views: 8256

Answers (2)

Frank van Puffelen
Frank van Puffelen

Reputation: 598740

There are two problems:

  1. your tableToJson function returns a string, which you can solve by either making it return an actual JSON object, or by calling JSON.parse as Jonas answered.

  2. Unfortunately the JSON.parse() will currently fail, due to the fact that your string is not valid JSON. You cannot nest objects in the way you've done. You'll either need to give each nested object a label:

    {
  "one": {"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"},
  "two": {"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"},
  "three": {"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"},
  "four": {"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"}
}

    Or return an array instead of an object:

    [
  {"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"},
  {"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"},
  {"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"},
  {"Item Code":"sthing","Product Name":"sthing","Qantity":"1","Unit Price":"0","Item Total":"0"}
]

If you go with the latter approach, take a moment to read Firebase's blog post on using arrays.

Upvotes: 2

Jonas Wilms
Jonas Wilms

Reputation: 138257

May convert the JSON string back to a js object:

newDataref.set({
  date: receiptDate,
  /*...*/
  zitems: JSON.parse(itemsJson)
});

But it would be definetly better to not stringify it at all.

Upvotes: 1

Related Questions