基于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在每种情况下，我都将从对象中的内容开始：

{

  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对象的相同索引）和字段（只需获取类名），然后更新即可适当的值。

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