基于HTML创建JSON，反之亦然

Question

我具有<select>/<input>基础元素的层次结构，可以将其形成（逻辑）组。换句话说，我有一个逻辑树，其中的每个节点都由（3）表示<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在每种情况下，我都将从对象中的内容开始：{&nbsp; rows: [&nbsp; &nbsp; { metric: 'someValue', operator: 'someValue', value: 'someValue' },&nbsp; &nbsp; // .. more as necessary&nbsp; ]}我会将对象构建为POJO（普通的旧JavaScript对象），然后用于JSON.stringify()将其转换为JSON。使用数据，您基本上可以遍历并输出HTML：function render(rows) {&nbsp; rows.forEach(({ metric, operator, value }) => {&nbsp; &nbsp; &nbsp;// create elements based on these value&nbsp; });}为了保存数据，有两种方法：解析HTML，然后将其转换为JSON对象将数据保留为对象，对其进行更新，然后根据其重新呈现页面我更喜欢第二种方法。而不是直接制作HTML，而是拥有一个数据对象，并且在进行更改时，更新该对象并只需调用您的render()方法即可重新呈现。这意味着在保存时不必解析HTML。它还将简化您提到的允许用于添加此内容的工具，因为它要做的全部是rows.push({ metric: 'defaultValue', operator: 'defaultValue', value: 'defaultValue' })。唯一的另一件事是onChange()向每个输入添加一个。当它们更改时，找出它在哪一行（获取.row父行，找出它相对于其兄弟姐妹的索引，那将是该rows对象的相同索引）和字段（只需获取类名），然后更新即可适当的值。这种基于渲染的数据也是React，Angular和Vue之类的库所做的。根据您的项目，您可能会考虑利用其中之一来帮助解决问题（尽管如果项目很小，那么如果没有，它是完全可行的）。