Display nested objects

[portla...@gmail.com]

Hi, I am new to KnockoutJS. I have two SQL tables, Participant and Career. They are parent and child with 1->* relationship. Each Participant can have 1 or multiple careers. I want to display them like this:

1. Participant: John Doe

    (1) Engineer

    (2) Writer

2. Participant: Lisa Smith

    (1) N/A

3. Participant: Kia Ko

    (1) Executive

    (2) PIA

4. Participant: Raj Kalai

    (1) Singer

.......

  

I am trying to do that using entity framework, Web API, and knockoutjs. I am able to get the web api work. But I cannot display them on the page. How can I achieve that?

Thanks in advance!

Jerry

[Patrick Steele]

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>

Here's a working jsFiddle: http://jsfiddle.net/psteele/m16Lvdtx/

Granted, this doesn't use knockouts observables, but it's a starting point.

---
Patrick Steele
http://weblogs.asp.net/psteele

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.