1

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/

2
  • Where is your attempted solution? Commented Mar 29, 2018 at 12:46
  • @AluanHaddad I have updated my question with what I knew about looping though the list. Commented Mar 29, 2018 at 12:57

1 Answer 1

1

Try this:

var dataToSave = ko.toJSON(self.valuesData);
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.