javascript - 在 JSON 结构中映射依赖关系

Question

我目前正在构建一个网络工具，该工具使用户能够生成字符串形式的选项包。为了选择他想要的选项，他使用了一个具有不同输入(单选框、复选框)的表单，该表单是从 dictionary.json 生成的，该表单当前包含所有可用选项及其代码，格式如下(可能会更改) ):

[

    {
        "id": 0001,
        "title":"foo",
        "type":"radio",
        "options":[
            {
                "bar":"",
                "foo":"489",
                "foobar":"489+490"
            }
        ]
    },
    {
        "id": 0002,
        "title":"something",
        "type":"check",
        "options":[
            {
                "everything":"M016",
                "evenmore":"M139"
            }
        ]
    },

    [...]

如您所见，它基本上是一个小型数据库。问题是选项相互依赖，所以如果 foo 是 foobar 它可能确定 something 肯定是 evenmore 并且不能更改为 everything。 我如何将这些依赖关系映射到 dictionary.json 中，以便生成的表单能够可靠地将由其他选择确定的选项变灰？

结构必须灵活，以便可以插入新的依赖项并可靠地生成新表单或根据它们验证现有输出。也可能有依赖于多个其他选项的选项。我想不出一种保存这些依赖关系的聪明方法，我想知道 JSON 是否是适合这里的格式。

欢迎任何提示或想法。谢谢!

Answer 1

您可以尝试将每个选项保存为一个对象，该对象存储所有选项，如果选择该选项，这些选项将被排除。所以您的 JSON 可能如下所示:

[
    {
        "id": 0001,
        "title":"foo",
        "type":"radio",
        "options":[
            {
                "bar":"",
                "excludes": []
            },
            {
                "foo":"489",
                "excludes": []
            },
            {
                "foobar":"489+490",
                "excludes": [
                    {
                        "id": 0002,
                        "options": [
                            "everything"
                        ],
                    },
                    {
                        "id": 0003,
                        "options": [
                            "apple",
                            "cherry"
                        ],
                    },
                ]
            }
        ]
    },
    {
        "id": 0002,
        "title":"something",
        "type":"check",
        "options":[
            {
                "everything":"M016",
                "excludes": []
            },
            {
                "evenmore":"M139",
                "excludes": []
            }
        ]
    },

    [...]

每次选择一个选项时，您都必须检查他们的排除列表并禁用特定字段的所有这些选项。
为了提高可用性，您可以检查一个字段是否只剩下一个选项，选择此选项然后禁用整个字段。

编辑:此外，您可以为每个选项保存一个 isExcludedBy 字段。
id 0002 的 everything 选项将如下所示:

"isExcludedBy": [
    "id": 0001,
    "options": [
        "foobar"
    ]
]

这有点多余，但根据您希望 UI 显示的内容，它可以为您节省一些计算时间。