Javascript : Save JSON data to firebase database

Question

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.

Cause you convert it to a String???! Or what should THIS WILL RETURN THE ABOVE JSON STRING mean? — Jonas Wilms
– Jonas Wilms, Commented Feb 25, 2018 at 12:55
It will taking input values from a table and converting it to the JSON like string mentioned above — mav-raj
– mav-raj, Commented Feb 25, 2018 at 13:05
So why are you confused that it is a string when you say it is a Json string ... ? — Jonas Wilms
– Jonas Wilms, Commented Feb 25, 2018 at 13:09
I want to save all those values as an object not as string. Like its saving other values above it. — mav-raj
– mav-raj, Commented Feb 25, 2018 at 13:13

Frank van Puffelen · Accepted Answer · 2018-02-25 15:52:47Z

2

There are two problems:

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.

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.

answered Feb 25, 2018 at 15:52

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mav-raj Over a year ago

Thanks for your answer, I tried the both approach,for first : gave every nested object a label and second : returned an array instead of an object, again it is sending data as a string.

Frank van Puffelen Over a year ago

That means that your tableToJson is still returning a string and you're not converting it to JSON. Update your question with the latest code (including a minimal version of tableToJson that still reproduces the problem).

Frank van Puffelen Over a year ago

As expected your tableToJson returns a string, which means you'll need to call JSON.parse on its results before passing them to Firebase to turn it into a property JSON object.

mav-raj Over a year ago

I did sir, like I said I tried the first approach then I went for the array approach. Updated my question accordingly.

Frank van Puffelen Over a year ago

Neither of the two lines you commented will work. JSON.parse doesn't modify its argument, but returns the JSON object that it parses. So you need to use the return value. As Jonas showed do: zitems: JSON.parse(itemsJson)

|

Jonas Wilms · Accepted Answer · 2018-02-25 13:15:52Z

1

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.

answered Feb 25, 2018 at 13:15

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Collectives™ on Stack Overflow

Javascript : Save JSON data to firebase database

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related