Mixing
collection with dynamic multiple tables using knockout
0
I have a collection which need to be displayed as table one by one.
For example in the collection 0 it can contain a list of 2 records and each record can contains 3 columns.- this has to be displayed in the table 1
Next in the collection 1 it can contain a list of 3 record and each record can contains 3 columns- this has to be displayed in the table 2
this collection is running in a loop and i have to repeat it based on the the collection Items
below is the knock code
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList ) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat,mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList[0] = cList;
columnList[1] = aList;
var newobj = new addMHxReport(columnList )
self.MHxReport.push(newobj);
}
$(document).ready(function () {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
});
below is the html code
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" style="border: 1px solid #ccc;margin: 0 0 15px 0px;" >
<table class="dsg-setup dsg-aligntop" border="0" >
<tbody data-bind="foreach: ColumnList" >
<tr>
<td><span data-bind='text: $data'></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Problem is i am not able to display it as a table of rows and columns. Not sure
what is missing and how to get the code to work to display in rows and columns.
can any one help. Please thanks in advance
knockout.js
edited Nov 19 '18 at 17:35
adiga
6,06662141
asked Nov 19 '18 at 16:38
jaiganesh
52
add a comment |
0
I have a collection which need to be displayed as table one by one.
For example in the collection 0 it can contain a list of 2 records and each record can contains 3 columns.- this has to be displayed in the table 1
Next in the collection 1 it can contain a list of 3 record and each record can contains 3 columns- this has to be displayed in the table 2
this collection is running in a loop and i have to repeat it based on the the collection Items
below is the knock code
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList ) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat,mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList[0] = cList;
columnList[1] = aList;
var newobj = new addMHxReport(columnList )
self.MHxReport.push(newobj);
}
$(document).ready(function () {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
});
below is the html code
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" style="border: 1px solid #ccc;margin: 0 0 15px 0px;" >
<table class="dsg-setup dsg-aligntop" border="0" >
<tbody data-bind="foreach: ColumnList" >
<tr>
<td><span data-bind='text: $data'></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Problem is i am not able to display it as a table of rows and columns. Not sure
what is missing and how to get the code to work to display in rows and columns.
can any one help. Please thanks in advance
knockout.js
edited Nov 19 '18 at 17:35
adiga
6,06662141
asked Nov 19 '18 at 16:38
jaiganesh
52
add a comment |
0
0
0
I have a collection which need to be displayed as table one by one.
For example in the collection 0 it can contain a list of 2 records and each record can contains 3 columns.- this has to be displayed in the table 1
Next in the collection 1 it can contain a list of 3 record and each record can contains 3 columns- this has to be displayed in the table 2
this collection is running in a loop and i have to repeat it based on the the collection Items
below is the knock code
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList ) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat,mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList[0] = cList;
columnList[1] = aList;
var newobj = new addMHxReport(columnList )
self.MHxReport.push(newobj);
}
$(document).ready(function () {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
});
below is the html code
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" style="border: 1px solid #ccc;margin: 0 0 15px 0px;" >
<table class="dsg-setup dsg-aligntop" border="0" >
<tbody data-bind="foreach: ColumnList" >
<tr>
<td><span data-bind='text: $data'></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Problem is i am not able to display it as a table of rows and columns. Not sure
what is missing and how to get the code to work to display in rows and columns.
can any one help. Please thanks in advance
knockout.js
edited Nov 19 '18 at 17:35
adiga
6,06662141
asked Nov 19 '18 at 16:38
jaiganesh
52
I have a collection which need to be displayed as table one by one.
For example in the collection 0 it can contain a list of 2 records and each record can contains 3 columns.- this has to be displayed in the table 1
Next in the collection 1 it can contain a list of 3 record and each record can contains 3 columns- this has to be displayed in the table 2
this collection is running in a loop and i have to repeat it based on the the collection Items
below is the knock code
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList ) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat,mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList[0] = cList;
columnList[1] = aList;
var newobj = new addMHxReport(columnList )
self.MHxReport.push(newobj);
}
$(document).ready(function () {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
});
below is the html code
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" style="border: 1px solid #ccc;margin: 0 0 15px 0px;" >
<table class="dsg-setup dsg-aligntop" border="0" >
<tbody data-bind="foreach: ColumnList" >
<tr>
<td><span data-bind='text: $data'></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Problem is i am not able to display it as a table of rows and columns. Not sure
what is missing and how to get the code to work to display in rows and columns.
can any one help. Please thanks in advance
knockout.js
knockout.js
edited Nov 19 '18 at 17:35
adiga
6,06662141
asked Nov 19 '18 at 16:38
jaiganesh
52
edited Nov 19 '18 at 17:35
adiga
6,06662141
asked Nov 19 '18 at 16:38
jaiganesh
52
edited Nov 19 '18 at 17:35
adiga
6,06662141
edited Nov 19 '18 at 17:35
adiga
6,06662141
edited Nov 19 '18 at 17:35
adiga
6,06662141
6,06662141
asked Nov 19 '18 at 16:38
jaiganesh
52
asked Nov 19 '18 at 16:38
jaiganesh
52
asked Nov 19 '18 at 16:38
jaiganesh
52
52
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
In your code, ColumnList is an array of arrays. So, text: $data will show [object Object],[object Object]. According to your question, you want to display them in multiple tables but you are creating a single table. So, move the foreach: ColumnList to outside the table part.
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr>
<td><span data-bind='text: Term'></span></td>
<td><span data-bind='text: Mhstdat'></span></td>
<td><span data-bind='text: Mhendat'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>Click on "Run code snippet" to test it out. Here's a fiddle as well.
UPDATE:
If you're unsure of the column names beforehand and want to get them from the object, then you can loop through each Object's keys and then bind the value for that key to the td. Like this:
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var columnList = ;
var cList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
// Has five columns
var aList = [{
Term: ko.observable("eyes"),
Diagnosis:ko.observable("surgery"),
Type:ko.observable("Major"),
Mhstdat: ko.observable("19NOV2018"),
Mhendat: ko.observable("20NOV2018"),
},
{
Term: ko.observable("hands"),
Diagnosis:ko.observable("transplant"),
Type:ko.observable("Critical"),
Mhstdat: ko.observable("21NOV2018"),
Mhendat: ko.observable("22NOV2018"),
}
];
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr data-bind="foreach: { data: Object.keys($data), as: 'key' }">
<td><span data-bind='text: $parent[key]'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>answered Nov 19 '18 at 17:15
adiga
6,06662141
for the shake of example i have given the function "add" and to bring the understanding. However in real scenerio, suppose, first table can contain only 2 columns, Second table can contains 3 columns, third table can contain 5 columns. So using the loop i need to display the data invariably of the columns i have in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 19 '18 at 18:13
@jaiganesh this is why you should create a Minimal, Complete, and Verifiable example when asking questions. Because from the question it looks like you have only 3 columns. Anyway, I have updated the answer to handle different number of columns dynamically.
– adiga
Nov 20 '18 at 6:21
this update was useful in getting the required functionality. For the shake of understanding i have kept it has simple. However i require 2 more things. - table should displaying heading which comes in the table collections and also it should be able to do sorting functionality in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 20 '18 at 7:51
@jaiganesh Table header should be easy. Please go through the updated answer and understand it. I have already shown how to loop through the keys. Now, you just have to loop through the keys and bind them toths. Sorting, really? I have already answered your question and additional functionality you added in comments. Sorry, I cannot do those 2 more things. People on stackoverflow are volunteering their time to help you when you're stuck. Please respect that. This is Q and A site. Not a free code-writing service.
– adiga
Nov 20 '18 at 9:11
for the purpose of debugging the html part , using console.log for the "$data" i can see only the arrays. However to understand what is happening inside "Object.Keys" and how to use them to get the name of the column name is not understanding to me. If there a better way to debug and understand the flow Please suggest and help.
– jaiganesh
Nov 21 '18 at 3:27
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379080%2fcollection-with-dynamic-multiple-tables-using-knockout%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
In your code, ColumnList is an array of arrays. So, text: $data will show [object Object],[object Object]. According to your question, you want to display them in multiple tables but you are creating a single table. So, move the foreach: ColumnList to outside the table part.
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr>
<td><span data-bind='text: Term'></span></td>
<td><span data-bind='text: Mhstdat'></span></td>
<td><span data-bind='text: Mhendat'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>Click on "Run code snippet" to test it out. Here's a fiddle as well.
UPDATE:
If you're unsure of the column names beforehand and want to get them from the object, then you can loop through each Object's keys and then bind the value for that key to the td. Like this:
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var columnList = ;
var cList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
// Has five columns
var aList = [{
Term: ko.observable("eyes"),
Diagnosis:ko.observable("surgery"),
Type:ko.observable("Major"),
Mhstdat: ko.observable("19NOV2018"),
Mhendat: ko.observable("20NOV2018"),
},
{
Term: ko.observable("hands"),
Diagnosis:ko.observable("transplant"),
Type:ko.observable("Critical"),
Mhstdat: ko.observable("21NOV2018"),
Mhendat: ko.observable("22NOV2018"),
}
];
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr data-bind="foreach: { data: Object.keys($data), as: 'key' }">
<td><span data-bind='text: $parent[key]'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>answered Nov 19 '18 at 17:15
adiga
6,06662141
for the shake of example i have given the function "add" and to bring the understanding. However in real scenerio, suppose, first table can contain only 2 columns, Second table can contains 3 columns, third table can contain 5 columns. So using the loop i need to display the data invariably of the columns i have in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 19 '18 at 18:13
@jaiganesh this is why you should create a Minimal, Complete, and Verifiable example when asking questions. Because from the question it looks like you have only 3 columns. Anyway, I have updated the answer to handle different number of columns dynamically.
– adiga
Nov 20 '18 at 6:21
this update was useful in getting the required functionality. For the shake of understanding i have kept it has simple. However i require 2 more things. - table should displaying heading which comes in the table collections and also it should be able to do sorting functionality in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 20 '18 at 7:51
@jaiganesh Table header should be easy. Please go through the updated answer and understand it. I have already shown how to loop through the keys. Now, you just have to loop through the keys and bind them toths. Sorting, really? I have already answered your question and additional functionality you added in comments. Sorry, I cannot do those 2 more things. People on stackoverflow are volunteering their time to help you when you're stuck. Please respect that. This is Q and A site. Not a free code-writing service.
– adiga
Nov 20 '18 at 9:11
for the purpose of debugging the html part , using console.log for the "$data" i can see only the arrays. However to understand what is happening inside "Object.Keys" and how to use them to get the name of the column name is not understanding to me. If there a better way to debug and understand the flow Please suggest and help.
– jaiganesh
Nov 21 '18 at 3:27
|
show 2 more comments
1
In your code, ColumnList is an array of arrays. So, text: $data will show [object Object],[object Object]. According to your question, you want to display them in multiple tables but you are creating a single table. So, move the foreach: ColumnList to outside the table part.
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr>
<td><span data-bind='text: Term'></span></td>
<td><span data-bind='text: Mhstdat'></span></td>
<td><span data-bind='text: Mhendat'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>Click on "Run code snippet" to test it out. Here's a fiddle as well.
UPDATE:
If you're unsure of the column names beforehand and want to get them from the object, then you can loop through each Object's keys and then bind the value for that key to the td. Like this:
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var columnList = ;
var cList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
// Has five columns
var aList = [{
Term: ko.observable("eyes"),
Diagnosis:ko.observable("surgery"),
Type:ko.observable("Major"),
Mhstdat: ko.observable("19NOV2018"),
Mhendat: ko.observable("20NOV2018"),
},
{
Term: ko.observable("hands"),
Diagnosis:ko.observable("transplant"),
Type:ko.observable("Critical"),
Mhstdat: ko.observable("21NOV2018"),
Mhendat: ko.observable("22NOV2018"),
}
];
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr data-bind="foreach: { data: Object.keys($data), as: 'key' }">
<td><span data-bind='text: $parent[key]'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>answered Nov 19 '18 at 17:15
adiga
6,06662141
for the shake of example i have given the function "add" and to bring the understanding. However in real scenerio, suppose, first table can contain only 2 columns, Second table can contains 3 columns, third table can contain 5 columns. So using the loop i need to display the data invariably of the columns i have in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 19 '18 at 18:13
@jaiganesh this is why you should create a Minimal, Complete, and Verifiable example when asking questions. Because from the question it looks like you have only 3 columns. Anyway, I have updated the answer to handle different number of columns dynamically.
– adiga
Nov 20 '18 at 6:21
this update was useful in getting the required functionality. For the shake of understanding i have kept it has simple. However i require 2 more things. - table should displaying heading which comes in the table collections and also it should be able to do sorting functionality in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 20 '18 at 7:51
@jaiganesh Table header should be easy. Please go through the updated answer and understand it. I have already shown how to loop through the keys. Now, you just have to loop through the keys and bind them toths. Sorting, really? I have already answered your question and additional functionality you added in comments. Sorry, I cannot do those 2 more things. People on stackoverflow are volunteering their time to help you when you're stuck. Please respect that. This is Q and A site. Not a free code-writing service.
– adiga
Nov 20 '18 at 9:11
for the purpose of debugging the html part , using console.log for the "$data" i can see only the arrays. However to understand what is happening inside "Object.Keys" and how to use them to get the name of the column name is not understanding to me. If there a better way to debug and understand the flow Please suggest and help.
– jaiganesh
Nov 21 '18 at 3:27
|
show 2 more comments
1
1
1
In your code, ColumnList is an array of arrays. So, text: $data will show [object Object],[object Object]. According to your question, you want to display them in multiple tables but you are creating a single table. So, move the foreach: ColumnList to outside the table part.
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr>
<td><span data-bind='text: Term'></span></td>
<td><span data-bind='text: Mhstdat'></span></td>
<td><span data-bind='text: Mhendat'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>Click on "Run code snippet" to test it out. Here's a fiddle as well.
UPDATE:
If you're unsure of the column names beforehand and want to get them from the object, then you can loop through each Object's keys and then bind the value for that key to the td. Like this:
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var columnList = ;
var cList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
// Has five columns
var aList = [{
Term: ko.observable("eyes"),
Diagnosis:ko.observable("surgery"),
Type:ko.observable("Major"),
Mhstdat: ko.observable("19NOV2018"),
Mhendat: ko.observable("20NOV2018"),
},
{
Term: ko.observable("hands"),
Diagnosis:ko.observable("transplant"),
Type:ko.observable("Critical"),
Mhstdat: ko.observable("21NOV2018"),
Mhendat: ko.observable("22NOV2018"),
}
];
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr data-bind="foreach: { data: Object.keys($data), as: 'key' }">
<td><span data-bind='text: $parent[key]'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>answered Nov 19 '18 at 17:15
adiga
6,06662141
In your code, ColumnList is an array of arrays. So, text: $data will show [object Object],[object Object]. According to your question, you want to display them in multiple tables but you are creating a single table. So, move the foreach: ColumnList to outside the table part.
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr>
<td><span data-bind='text: Term'></span></td>
<td><span data-bind='text: Mhstdat'></span></td>
<td><span data-bind='text: Mhendat'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>Click on "Run code snippet" to test it out. Here's a fiddle as well.
UPDATE:
If you're unsure of the column names beforehand and want to get them from the object, then you can loop through each Object's keys and then bind the value for that key to the td. Like this:
function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var columnList = ;
var cList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
// Has five columns
var aList = [{
Term: ko.observable("eyes"),
Diagnosis:ko.observable("surgery"),
Type:ko.observable("Major"),
Mhstdat: ko.observable("19NOV2018"),
Mhendat: ko.observable("20NOV2018"),
},
{
Term: ko.observable("hands"),
Diagnosis:ko.observable("transplant"),
Type:ko.observable("Critical"),
Mhstdat: ko.observable("21NOV2018"),
Mhendat: ko.observable("22NOV2018"),
}
];
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr data-bind="foreach: { data: Object.keys($data), as: 'key' }">
<td><span data-bind='text: $parent[key]'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr>
<td><span data-bind='text: Term'></span></td>
<td><span data-bind='text: Mhstdat'></span></td>
<td><span data-bind='text: Mhendat'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var cList = ;
var columnList = ;
var aList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
aList.push(new add("blood", "13MAR2018", "10SEP2018"));
aList.push(new add("ear", "13MAR2018", "10SEP2018"));
aList.push(new add("head", "13MAR2018", "10SEP2018"));
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr>
<td><span data-bind='text: Term'></span></td>
<td><span data-bind='text: Mhstdat'></span></td>
<td><span data-bind='text: Mhendat'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var columnList = ;
var cList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
// Has five columns
var aList = [{
Term: ko.observable("eyes"),
Diagnosis:ko.observable("surgery"),
Type:ko.observable("Major"),
Mhstdat: ko.observable("19NOV2018"),
Mhendat: ko.observable("20NOV2018"),
},
{
Term: ko.observable("hands"),
Diagnosis:ko.observable("transplant"),
Type:ko.observable("Critical"),
Mhstdat: ko.observable("21NOV2018"),
Mhendat: ko.observable("22NOV2018"),
}
];
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr data-bind="foreach: { data: Object.keys($data), as: 'key' }">
<td><span data-bind='text: $parent[key]'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>function TestPageModel() {
var self = this;
self.MHxReport = ko.observableArray();
function addMHxReport(columnList) {
return {
ColumnList: ko.observableArray(columnList)
}
}
function add(term, mhstdat, mhendat) {
return {
Term: ko.observable(term),
Mhstdat: ko.observable(mhstdat),
Mhendat: ko.observable(mhendat)
}
}
var columnList = ;
var cList = ;
cList.push(new add("cough", "13MAR2018", "10SEP2018"));
cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));
// Has five columns
var aList = [{
Term: ko.observable("eyes"),
Diagnosis:ko.observable("surgery"),
Type:ko.observable("Major"),
Mhstdat: ko.observable("19NOV2018"),
Mhendat: ko.observable("20NOV2018"),
},
{
Term: ko.observable("hands"),
Diagnosis:ko.observable("transplant"),
Type:ko.observable("Critical"),
Mhstdat: ko.observable("21NOV2018"),
Mhendat: ko.observable("22NOV2018"),
}
];
columnList.push(cList, aList)
var newobj = new addMHxReport(columnList)
self.MHxReport.push(newobj);
}
$(document).ready(function() {
var testPageModel = new TestPageModel();
ko.applyBindings(TestPageModel);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row" data-bind="foreach: MHxReport">
<div style="margin:12px 0 12px 0;">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
<span data-bind="text: 'table '+$index()"></span>
<table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
<tbody data-bind="foreach: $data">
<tr data-bind="foreach: { data: Object.keys($data), as: 'key' }">
<td><span data-bind='text: $parent[key]'></span></td>
</tr>
</tbody>
</table>
<br> <br>
</div>
</div>
</div>
</div>answered Nov 19 '18 at 17:15
adiga
6,06662141
edited Nov 20 '18 at 6:18
answered Nov 19 '18 at 17:15
adiga
6,06662141
answered Nov 19 '18 at 17:15
adiga
6,06662141
answered Nov 19 '18 at 17:15
adiga
6,06662141
6,06662141
for the shake of example i have given the function "add" and to bring the understanding. However in real scenerio, suppose, first table can contain only 2 columns, Second table can contains 3 columns, third table can contain 5 columns. So using the loop i need to display the data invariably of the columns i have in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 19 '18 at 18:13
@jaiganesh this is why you should create a Minimal, Complete, and Verifiable example when asking questions. Because from the question it looks like you have only 3 columns. Anyway, I have updated the answer to handle different number of columns dynamically.
– adiga
Nov 20 '18 at 6:21
this update was useful in getting the required functionality. For the shake of understanding i have kept it has simple. However i require 2 more things. - table should displaying heading which comes in the table collections and also it should be able to do sorting functionality in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 20 '18 at 7:51
@jaiganesh Table header should be easy. Please go through the updated answer and understand it. I have already shown how to loop through the keys. Now, you just have to loop through the keys and bind them toths. Sorting, really? I have already answered your question and additional functionality you added in comments. Sorry, I cannot do those 2 more things. People on stackoverflow are volunteering their time to help you when you're stuck. Please respect that. This is Q and A site. Not a free code-writing service.
– adiga
Nov 20 '18 at 9:11
for the purpose of debugging the html part , using console.log for the "$data" i can see only the arrays. However to understand what is happening inside "Object.Keys" and how to use them to get the name of the column name is not understanding to me. If there a better way to debug and understand the flow Please suggest and help.
– jaiganesh
Nov 21 '18 at 3:27
|
show 2 more comments
for the shake of example i have given the function "add" and to bring the understanding. However in real scenerio, suppose, first table can contain only 2 columns, Second table can contains 3 columns, third table can contain 5 columns. So using the loop i need to display the data invariably of the columns i have in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 19 '18 at 18:13
@jaiganesh this is why you should create a Minimal, Complete, and Verifiable example when asking questions. Because from the question it looks like you have only 3 columns. Anyway, I have updated the answer to handle different number of columns dynamically.
– adiga
Nov 20 '18 at 6:21
this update was useful in getting the required functionality. For the shake of understanding i have kept it has simple. However i require 2 more things. - table should displaying heading which comes in the table collections and also it should be able to do sorting functionality in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 20 '18 at 7:51
@jaiganesh Table header should be easy. Please go through the updated answer and understand it. I have already shown how to loop through the keys. Now, you just have to loop through the keys and bind them toths. Sorting, really? I have already answered your question and additional functionality you added in comments. Sorry, I cannot do those 2 more things. People on stackoverflow are volunteering their time to help you when you're stuck. Please respect that. This is Q and A site. Not a free code-writing service.
– adiga
Nov 20 '18 at 9:11
for the purpose of debugging the html part , using console.log for the "$data" i can see only the arrays. However to understand what is happening inside "Object.Keys" and how to use them to get the name of the column name is not understanding to me. If there a better way to debug and understand the flow Please suggest and help.
– jaiganesh
Nov 21 '18 at 3:27
for the shake of example i have given the function "add" and to bring the understanding. However in real scenerio, suppose, first table can contain only 2 columns, Second table can contains 3 columns, third table can contain 5 columns. So using the loop i need to display the data invariably of the columns i have in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 19 '18 at 18:13
for the shake of example i have given the function "add" and to bring the understanding. However in real scenerio, suppose, first table can contain only 2 columns, Second table can contains 3 columns, third table can contain 5 columns. So using the loop i need to display the data invariably of the columns i have in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 19 '18 at 18:13
@jaiganesh this is why you should create a Minimal, Complete, and Verifiable example when asking questions. Because from the question it looks like you have only 3 columns. Anyway, I have updated the answer to handle different number of columns dynamically.
– adiga
Nov 20 '18 at 6:21
@jaiganesh this is why you should create a Minimal, Complete, and Verifiable example when asking questions. Because from the question it looks like you have only 3 columns. Anyway, I have updated the answer to handle different number of columns dynamically.
– adiga
Nov 20 '18 at 6:21
this update was useful in getting the required functionality. For the shake of understanding i have kept it has simple. However i require 2 more things. - table should displaying heading which comes in the table collections and also it should be able to do sorting functionality in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 20 '18 at 7:51
this update was useful in getting the required functionality. For the shake of understanding i have kept it has simple. However i require 2 more things. - table should displaying heading which comes in the table collections and also it should be able to do sorting functionality in the table. Please suggest and help. Thanks in advance
– jaiganesh
Nov 20 '18 at 7:51
@jaiganesh Table header should be easy. Please go through the updated answer and understand it. I have already shown how to loop through the keys. Now, you just have to loop through the keys and bind them to
ths. Sorting, really? I have already answered your question and additional functionality you added in comments. Sorry, I cannot do those 2 more things. People on stackoverflow are volunteering their time to help you when you're stuck. Please respect that. This is Q and A site. Not a free code-writing service.– adiga
Nov 20 '18 at 9:11
@jaiganesh Table header should be easy. Please go through the updated answer and understand it. I have already shown how to loop through the keys. Now, you just have to loop through the keys and bind them to
ths. Sorting, really? I have already answered your question and additional functionality you added in comments. Sorry, I cannot do those 2 more things. People on stackoverflow are volunteering their time to help you when you're stuck. Please respect that. This is Q and A site. Not a free code-writing service.– adiga
Nov 20 '18 at 9:11
for the purpose of debugging the html part , using console.log for the "$data" i can see only the arrays. However to understand what is happening inside "Object.Keys" and how to use them to get the name of the column name is not understanding to me. If there a better way to debug and understand the flow Please suggest and help.
– jaiganesh
Nov 21 '18 at 3:27
for the purpose of debugging the html part , using console.log for the "$data" i can see only the arrays. However to understand what is happening inside "Object.Keys" and how to use them to get the name of the column name is not understanding to me. If there a better way to debug and understand the flow Please suggest and help.
– jaiganesh
Nov 21 '18 at 3:27
|
show 2 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379080%2fcollection-with-dynamic-multiple-tables-using-knockout%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
