As a starting point, a simple view model with the data required:
var vm = {
participants: [
{ name: 'John Doe', careers: [ 'Engineer', 'Writer' ] },
{ name: 'Lisa Smith', careers: [ 'N/A' ] },
{ name: 'Kia Ko', careers: [ 'Executive', 'PIA' ] },
{ name: 'Raj Kalai', careers: [ 'Singer' ] }
]
};
And some simple HTML that uses knockout to display the data (NOTE: I don't recommend doing a lot of string concatenation in the data-bind attribute, but I was just throwing this together):
<div data-bind='foreach: participants'>
<div data-bind='text: ($index() + 1) + "." + name'>
</div>
<div data-bind='foreach: careers'>
<div data-bind='text: "(" + ($index() + 1) + ")" + $data' style='margin-left: 10px' />
</div>
</div>
Granted, this doesn't use knockouts observables, but it's a starting point.