Dynamic table in knockoutjs - html

Question

I am using ajax call to get data its return data in json format like below:
{ "d" : [
{ "Goal" : "Some one client",
"GoalID" : 1,
"IsPublic" : true,
"MemberName" : "user1"
},
{ "Goal" : " this is goal",
"GoalID" : 1,
"IsPublic" : false,
"MemberName" : "user2"
},
{ "Goal" : "Get call",
"GoalID" : 4,
"IsPublic" : true,
"MemberName" : "user2"
}
] }
Now in my html page i want to create separate table for each user. Here is my table
//want username here then table for goal of that user
<table>
<thead>
<tr class="headerRow">
<th>member</th>
<th>
Goals
</th>
</tr>
</thead>
<tbody data-bind="foreach: tasks">
<tr">
<td>
<span data-bind="text: members" />
</td>
<td>
<span data-bind="text: goal" />
</td>
</tr>
</tbody>
</table>
And "task" is the observable array containing all goal details.
This is my goal constuctor in javascript
function Goal(data) {
var self = this;
self.goalID = data.GoalID;
self.goal = data.Goal;
self.isPublic = ko.observable(data.IsPublic);
self.members = ko.observable(data.MemberName);
}

Answer 1

Maybe it is not the best solution but it will work. Add computed that returns all users:
self.users = ko.computed(function(){
var list = ko.utils.arrayMap(self.tasks(), function(item){
return item.members
});
return ko.utils.arrayGetDistinctValues(list);
});
And using foreach binding create a table for each user:
<div data-bind="foreach: users">
<table>
<thead>
<tr>
<th>membername</th>
<th>
Goals
</th>
</tr>
</thead>
<tbody data-bind="foreach: $parent.tasks">
<tr data-bind="if: members == $parent">
<td>
<span data-bind="text: members" />
</td>
<td>
<span data-bind="text: goals" />
</td>
</tr>
</tbody>
</table>
</div>
Here is working fiddle: http://jsfiddle.net/TQXja/4/