Javascript 将JSON数据从Web API映射到敲除

我有一个数组，如下所示：

 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 }
            ]
    }
    ]),

这是我绑定数据的HTML，基本上我使用的是一个敲除小部件，因此下面的代码在\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>

编辑： 这里是不同的地方，也许这里有问题。从web api获取的模块按以下方式处理：

 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);
    },

编辑：

下面是一些关于Breeze如何使用JSON返回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);
    };

---

我认为上面的代码可能有问题？

我更改了web API中的模型，解决了问题。这是新型号。好像我错过了ParentModuleId作为孩子们的外键。谢谢你的帮助

[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; }
}

---

可以在jsfiddle.net中添加一个工作示例并共享链接吗？嗨，Sherin，我知道这会很有帮助。我试着用我的代码。但它变得有点复杂。基本上我知道问题在哪里。我的webAPI正确地返回了JSON，但是Breeze实体管理器可能是问题所在。如果代码被修剪得更多，这将非常有帮助，就像@Sherinthew所说的，如果它是一个实际的复制。如果我们不能重新调整场景，我们将很难帮助您，尤其是在这么多几乎不相关的代码方面。德国劳埃德船级社！只需检查将moduleId设置为新的uuid不会覆盖来自webApi的moduleId。

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);
    };

[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; }
}