在 HTML 基础上创建 JSON，反之亦然

Question

我有基于<select>/<input> 的元素的层次结构，可以形成（逻辑）组。换句话说，我有逻辑树，其中每个节点由（三个）<select>/<input> 表示。

这是 HTML 的样子（所有额外的元素，如按钮已删除）：

<div class="conditions-group logical-or">

<div class="conditions">

    <div class="conditions-group logical-and">

        <div class="conditions">

            <div class="condition row">
                <div class="metric">
                    <select class="form-control"></select>
                </div>
                <div class="operator">
                    <select class="form-control "></select>
                </div>
                <div class="value">
                    <input value="" class="form-control">
                </div>
            </div>

            <div class="condition row">
                <div class="metric">
                    <select class="form-control"></select>
                </div>
                <div class="operator">
                    <select class="form-control "></select>
                </div>
                <div class="value">
                    <input value="" class="form-control">
                </div>
            </div>

        </div>

        <div class="condition row">
            <div class="metric">
                <select class="form-control"></select>
            </div>
            <div class="operator">
                <select class="form-control "></select>
            </div>
            <div class="value">
                <input value="" class="form-control">
            </div>
        </div>

    </div>
</div>

我的应用是 C# ASP-NET MVC。我使用引导程序使这看起来不错。我有一些 JS 逻辑供用户创建它。此 HTML 代码只是我创建的示例。

我需要存储这个结构并能够从存储的数据中构建 HTML（这样用户就可以回来查看他的结构）。 所以我明白我需要使用JSON来存储。

这是我的问题： 实现我的目标的更好方法是什么？我需要使用一些 JS 库，对吗？您能否提出我在这种情况下使用什么以及为什么要使用的明确实用建议。

Answer 1

您没有有使用 JSON，但您确实需要以某种方式对其进行序列化。 JSON 可以是一个相当干净的方法。

有一些库可以做到这一点，但粗略一看，它们似乎都没有得到很好的支持，所以你可能想避免。

在这种情况下，它看起来相当直接，我可能会采用更直接的方法，您或多或少地手动完成。

开始，因为看起来你每个都有metric、operator和value，我将从你的对象中的那些开始：

{
  rows: [
    { metric: 'someValue', operator: 'someValue', value: 'someValue' },
    // .. more as necessary
  ]
}

我会将对象构建为 POJO（普通的旧 JavaScript 对象），然后使用 JSON.stringify() 将其转换为 JSON。

使用您的数据，您基本上可以循环并输出您的 HTML：

function render(rows) {
  rows.forEach(({ metric, operator, value }) => {
     // create elements based on these value
  });
}

保存数据有两种方法：

• 解析 HTML 并在事后将其转换为 JSON 对象
• 将数据保留为对象，更新它，然后根据它重新渲染页面

我更喜欢第二种方法。与其直接制作 HTML，不如拥有一个数据对象，当您进行更改时，更新该对象并调用您的 render() 方法重新渲染。这意味着您在保存时不必解析 HTML。

它还将简化您提到的工具以允许用户添加它，因为它所要做的就是rows.push({ metric: 'defaultValue', operator: 'defaultValue', value: 'defaultValue' })。

唯一的另一件事是为每个输入添加一个onChange()。当它们发生变化时，找出它是哪一行（获取 .row 父级并找出它相对于其兄弟姐妹的索引，这将是 rows 对象的相同索引）和字段（只需获取类name)，然后只更新适当的值。

这种基于渲染的数据也是 React、Angular 和 Vue 等库所做的。根据您的项目，您也可以考虑利用其中一个来帮助解决问题（尽管如果项目很小，则完全可以不用）。