基于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可能是一种非常干净的方法。

那里有一些库可以做到这一点，但粗略看一下，它们似乎都没有得到很好的支持，因此您可能要避免。

在这种情况下，这似乎很简单，我可能会采用一种更直接的方法，即您或多或少地手工完成。

首先，由于每个value中似乎都有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父对象并找出相对于其同级.row的索引，该rows对象的索引将是相同的）和字段（只需获取类名），然后然后只需更新适当的值即可。

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