如何使用新构造函数为 json 中的每个节点创建实例

Question

我即将开始编写一个组织结构图的应用程序，我将使用这个库，其中他们提供的代码示例非常清楚：

        var options = new primitives.orgdiagram.Config();
        var items = [
            new primitives.orgdiagram.ItemConfig({
                id: 0,
                parent: null,
                title: "Scott Aasrud",
                description: "VP, Public Sector",
                image: "demo/images/photos/a.png"
            }),
            new primitives.orgdiagram.ItemConfig({
                id: 1,
                parent: 0,
                title: "Ted Lucas",
                description: "VP, Human Resources",
                image: "demo/images/photos/b.png"
            }),
            new primitives.orgdiagram.ItemConfig({
                id: 2,
                parent: 0,
                title: "Joao Stuger",
                description: "Business Solutions, US",
                image: "demo/images/photos/c.png"
            })
        ];
        options.items = items;
        options.cursorItem = 0;
        options.hasSelectorCheckbox = primitives.common.Enabled.True;
        jQuery("#basicdiagram").orgDiagram(options);

这对我来说很奇怪，是 items 数组，我不会将该数组放在我将要构建我的应用程序的主文件中。 实际上数据将来自 json，所以想象一下 items 数组来自单独的 json 文件，所以......为了将该数据放入 JSON 中，然后在我的主文件中调用它，并为该 JSON 中的每个节点创建像这样的实例new primitives.orgdiagram.ItemConfig({ . . . })，我应该怎么做？

你有什么建议？

Answer 1

您可以使用[].map .它创建一个新数组，其中包含一个函数返回的值，每个数组项作为参数调用：

var items = JSON.parse(myjson).map(function(item) {
  return new primitives.orgdiagram.ItemConfig(item);
});

Answer 2

实际上，通过新对象定义节点是为了代码的可读性，以便将用户引用到正确对象类型的选项。图表也支持 JSON 对象。

        var options = new primitives.orgdiagram.Config();
        var items = [
            {
                id: 0,
                parent: null,
                title: "Scott Aasrud",
                description: "VP, Public Sector",
                image: "demo/images/photos/a.png"
            },
            {
                id: 1,
                parent: 0,
                title: "Ted Lucas",
                description: "VP, Human Resources",
                image: "demo/images/photos/b.png"
            },
            {
                id: 2,
                parent: 0,
                title: "Joao Stuger",
                description: "Business Solutions, US",
                image: "demo/images/photos/c.png"
            }
        ];
        options.items = items;
        options.cursorItem = 0;
        options.hasSelectorCheckbox = primitives.common.Enabled.True;
        jQuery("#basicdiagram").orgDiagram(options);