Map JSON data from Web API to KnockOut

Question

I Have an array as below:

 modules: ko.observableArray(),
    pagemodules: ko.observableArray([
        {
            id: "1", name: "name1", description: "", icon: "fa fa-facebook-square", page: "page-8", active: false, children:
            [
                { id: "1.1", name: "name1-1", description: "", icon: "fa fa-film", page: "/home/index", active: false },
                { id: "1.2", name: "name1-2", description: "", icon: "", page: "/home/help", active: false },
                { id: "1.3", name: "name1-2", description: "", icon: "", page: "page-8", active: false },
                { id: "1.4", name: "name1-3", description: "", icon: "", page: "page-8", active: false },
                { id: "1.5", name: "name1-4", description: "", icon: "", page: "page-8", active: false },
                { id: "1.6", name: "name1-5", description: "", icon: "", page: "page-8", active: false }
            ]
        },
    {
        id: "2", name: "name2", description: "", icon: "fa fa-search", page: "/home/about", active: false, children: []
    },
    {
        id: "3", name: "name3", description: "", icon: "fa fa-heart", page: "page-8", active: false, children: 
            [
                { id: "3.1", name: "name3-1", description: "", icon: "", page: "page-8", active: false },
                { id: "3.2", name: "name3-2", description: "", icon: "", page: "page-8", active: false },
                { id: "3.3", name: "name3-3", description: "", icon: "", page: "page-8", active: false },
                { id: "3.4", name: "name3-4", description: "", icon: "", page: "page-8", active: false }
            ] 
    },
    {
        id: "4", name: "name4", description: "", icon: "fa fa-envelope", page: "page-8", active: false, children: []
    },
    {
        id: "5", name: "name3", description: "", icon: "fa fa-star", page: "page-8", active: false, children: 
            [
                { id: "5.1", name: "name5-1", description: "", icon: "", page: "page-8", active: false },
                { id: "5.2", name: "name5-2", description: "", page: "page-8", active: false },
                { id: "5.3", name: "name5-3", description: "", page: "page-8", active: false },
                { id: "5.4", name: "name5-4", description: "", page: "page-8", active: false }
            ]
    },
    {
        id: "6", name: "name6", description: "", page: "page-8", active: false, children: 
            [
                { id: "6.1", name: "name6-1", description: "", page: "page-8", active: false },
                { id: "6.2", name: "name6-2", description: "", page: "page-8", active: false },
                { id: "6.3", name: "name6-3", description: "", page: "page-8", active: false },
                { id: "6.4", name: "name6-4", description: "", page: "page-8", active: false }
            ]
    },
    {
        id: "7", name: "name7", description: "", page: "page-8", active: false, children: 
            [
                { id: "7.1", name: "name7-1", description: "", page: "page-8", active: false },
                { id: "7.2", name: "name7-2", description: "", page: "page-8", active: false },
                { id: "7.3", name: "name7-3", description: "", page: "page-8", active: false },
                { id: "7.4", name: "name7-4", description: "", page: "page-8", active: false }
            ]
    },
    {
        id: "8", name: "name8", description: "", page: "page-8", active: false, children: 
            [
                { id: "8.1", name: "name8-1", description: "", page: "page-8.1", active: false },
                { id: "8.2", name: "name8-2", description: "", page: "page-8.2", active: false },
                { id: "8.3", name: "name8-3", description: "", page: "page-8.3", active: false },
                { id: "8.4", name: "name8-4", description: "", page: "page-8.4", active: false }
            ]
    }
    ]),

this is the HTML where i bind the data, basically i'm using a knockout widget, so the below code is in \\app\\widgets\\expander\\view.html

<div class="panel-group" id="accordion" data-bind="foreach: { data: settings.items}">
<div class="panel panel-primary">
    <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-bind="attr: { href:'#collapse'+$data.id}">
        <h4 class="panel-title accordion-toggle">

            <!--<span data-bind="css: $data.icon"></span>-->

            <a style="padding-left: 10px;" class="collapsed" data-bind="html: $data.name"></a>

        </h4>
    </div>
    <div data-bind="attr: { id:'collapse'+$data.id}" class="panel-collapse collapse">
        <div class="list-group" data-bind="foreach: $data.children">
            <div class="list-group-item">
                <span data-bind="css: $data.icon"></span>
                <a style="padding-left: 10px;" href="#" data-bind="html: $data.id+'.'+$data.name"></a>
            </div>
        </div>
    </div>
</div>

and this is how i use the widget

<div data-bind="expander: {items:modules}"></div>

modules - get data from WebAPI pagemodules - harcoded value with same format.

When I bind these values to my accordion control, "pagemodules" works, while "modules" don't. What is the problem here?

here is sample JSON data from my web API:

[{"$id":"1","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"e8c8650d-2756-4abc-82ae-d86a62e5fbc6","Name":"Page1","Description":null,"Icon":null,"Children":[{"$id":"2","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"2e7a6565-d177-4630-bb77-07f58dc6e7f9","Name":"Page1.2","Description":null,"Icon":null,"Children":null},{"$id":"3","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"64248745-5a17-496b-97d4-4fbdae5a2f92","Name":"Page1.1","Description":null,"Icon":null,"Children":null},{"$id":"4","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"b065d3f3-5dd6-4adb-918d-bb07f7e5c4e2","Name":"Page1.3","Description":null,"Icon":null,"Children":null},{"$id":"5","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"11da74d4-403d-41ef-a870-bc48da7b1dc7","Name":"Page1.5","Description":null,"Icon":null,"Children":null},{"$id":"6","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"18271cf5-5e5e-401d-96ca-ce5214b98049","Name":"Page1.4","Description":null,"Icon":null,"Children":null}]},{"$id":"7","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"23ddb73c-4319-48e0-b9f7-f96e10b76306","Name":"Page2","Description":null,"Icon":null,"Children":[{"$id":"8","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"5edab097-58fd-41f8-b12f-202a76c787ea","Name":"Page2.3","Description":null,"Icon":null,"Children":null},{"$id":"9","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"139cb94f-6dcc-408f-ac69-5ab0ff1555ed","Name":"Page2.1","Description":null,"Icon":null,"Children":null},{"$id":"10","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"745532d0-9ea1-4462-b7e2-b9189cc2da72","Name":"Page2.2","Description":null,"Icon":null,"Children":null}]},{"$id":"11","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"3042928a-a01f-459e-bd84-f6a9c19f30b8","Name":"Page3","Description":null,"Icon":null,"Children":[{"$id":"12","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"21336001-d0c2-4066-ad7a-24c1291dfd53","Name":"Page3.1","Description":null,"Icon":null,"Children":null},{"$id":"13","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"9d654b2c-7f1b-4e48-94d4-42fc50d4a6a6","Name":"Page3.3","Description":null,"Icon":null,"Children":null},{"$id":"14","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"06ba9de8-97c9-4736-a83a-56a12fd5dc7e","Name":"Page3.2","Description":null,"Icon":null,"Children":null},{"$id":"15","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"e3e98162-599b-4233-aa5d-6cb6fd1a4d50","Name":"Page3.4","Description":null,"Icon":null,"Children":null},{"$id":"16","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"609376d4-a354-4c52-8512-a98d039a68ed","Name":"Page3.5","Description":null,"Icon":null,"Children":null},{"$id":"17","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"2b44d16c-148e-4a51-b728-cb3dd3d72b86","Name":"Page3.7","Description":null,"Icon":null,"Children":null},{"$id":"18","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"0b6f3c82-fdfd-46dc-8d86-d98a4d00f530","Name":"Page3.6","Description":null,"Icon":null,"Children":null}]}]

EDIT: Here is what is different,maybe something wrong here. The "modules" which get from the web api are handled in this way:

 attached: function () {
        var self = this;
        var modules = unitofwork.usermodules.all()
                            .then(function (modules) {
                                self.modules(modules);
                                //console.log(JSON.stringify(modules, undefined, 2));
                                console.log(modules);
                            }
        );

        return Q.all([modules]).fail(self.handleError);
    },

Edit :

here is some code on how the JSON is used by Breeze to return me the "unitofwork.usermodules.all()".

var query = breeze.EntityQuery
                .from(resourceName)
                .orderBy("name asc")
                .expand("Children");

            return executeQuery(query);

function extendModule(metadataStore) {
        var moduleCtor = function () {
            this.moduleId = ko.observable(breeze.core.getUuid());

        };

        metadataStore.registerEntityTypeCtor('Module', moduleCtor);
    };

I think maybe the code above might be a problem?

Answer 1

I change the Model in web API, as solved the problem. Here is the new model. Seems like i have missed the "ParentModuleId" as foreign key to the Children. Thanks for all the help. :)

[DataContract(IsReference = true)]
public class Module
{
    [Key]
    [DataMember]
    public Guid ModuleId { get; set; }

    [Required]
    [StringLength(100)]
    [DataMember]
    public string Name { get; set; }

    [StringLength(100)]
    [DataMember]
    public string Description { get; set; }

    [StringLength(50)]
    [DataMember]
    public string Icon { get; set; }

    [DataMember]
    public Guid? ParentModuleId { get; set; }

    [ForeignKey("ParentModuleId")]
    [DataMember]
    public virtual ICollection<Module> Children { get; set; }
}