Knockout JS: Creating Json from viewmodel observab

问题:

I have a html table whose columns are dynamically created. There is add row button which adds row to the table and remove row button to remove the row. Finally there is a Save button where I want to get all the data from the table that was entered and send it in json format to my mvc controller.

The table setup all works fine. The only issue I am having is creating json from the observable array. Below is my fiddle:

https://jsfiddle.net/4djn2zee/1/

If you click add one or more rows and enter data to both the rows. If you press save button there is an observable as:

self.valuesData()

Now the value of this if you see in console comes out to be as:

(2) [ValuesData, ValuesData]

Further expanding this:

(2) [ValuesData, ValuesData]
0:ValuesData {ID: "1", Co1: "2", Col2: "3", Col3: "4", Col4: "5", …}
1:ValuesData {ID: ƒ, Co1: ƒ, Col2: ƒ, Col3: ƒ, Col4: ƒ, …}
length:2
__proto__:Array(0)

Since I added 2 rows I can see an array of 2.

Now if you see above I can see my data in the first row id, col1, col2 etc. What I am having issue is how to get the data from the observable and construct my json.

I am expecting my json to be like as below:

{
"ID": "1",
"Co1": "2",
"Col2": "3",
"Col3": "4",
"Col4": "5",
"Col5": "6",
"Comment": "7"
},
{
"ID": "8",
"Co1": "9",
"Col2": "10",
"Col3": "11",
"Col4": "12",
"Col5": "13",
"Comment": "14"
}

Updated:

I have tried as below:

    var dataToSave = $.map(self.valuesData(), function(item) {
    var jsonToSend = {};



    return jsonToSend;
  });

Again as mentioned for the first row I can see the data but not sure how to get the data from the second and subsequent rows.

here is my updated fiddle:

https://jsfiddle.net/4djn2zee/3/

回答1:

Try this:

var dataToSave = ko.toJSON(self.valuesData);