Javascript 基于HTML创建JSON，反之亦然

我有基于

/

的元素的层次结构，这些元素可以组成（逻辑）组。换句话说，我有一个逻辑树，其中每个节点由（三）

/

表示

以下是HTML的外观（删除了所有额外元素，如按钮）：

我的应用程序是C#ASP-NETMVC。我使用引导程序使它看起来很好。我有一些JS逻辑来创建这个用户。这个HTML代码只是我创建的示例

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

以下是我的问题：

---

实现我的目标最好的方法是什么？我需要使用一些JS库，对吗？请您明确我的实用建议，在这种情况下使用什么以及为什么。

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

有一些库可以做到这一点，但粗略地看一下，它们似乎都没有得到很好的支持，所以您可能希望避免

在这种情况下，它看起来相当直截了当，我可能会采用一种更直接的方法，即或多或少地手工操作

首先，因为看起来每个对象中都有

度量

、

运算符

和

值

，所以我将从对象中的值开始：

{
  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

它还将简化您提到的工具，以允许用户添加此内容，因为它需要做的只是

行。推送（{metric:'defaultValue'，operator:'defaultValue'，value:'defaultValue'}）

唯一的另一件事是在每个输入中添加一个

onChange（）

。当它们更改时，找出它是哪一行（获取

.row

父行，并找出它相对于其同级的索引，这将是

rows

对象的相同索引）和字段（仅获取类名），然后只更新适当的值

---

这种基于数据的渲染也是React、Angular和Vue等库所做的。根据你的项目，你可以考虑利用其中的一个来帮助事情（虽然项目很小，但完全可行）。

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