根据 Html 结构创建嵌套的 Json 数据

Question

我正在开发一个自定义 Jquery 查询构建器，我已经完成了包含所有字段和嵌套元素的 UI 部分，现在我在以 Json 格式以相同的嵌套方式导出数据时遇到了困难（继承了我在 HTML 中的做法）。

例如我的 HTML 代码是

<div class="query">
  <input type="text" value="Field 1">
    <div class="query">
      <input type="text" value="Field 2">
      <div class="query">
        <input type="text" value="Field 3">
      </div>
   </div>
   <div class="query">
      <input type="text" value="Field 4">
   </div>
</div>

需要以 Json 格式输出为

     {
   "rules":[
      {
         "field":"field 1"
      },
      {
         "rules":[
            {
               "field":"field 2"
            },
            {
               "rules":[
                  {
                     "field":"field 3"
                  }
               ]
            }
         ]
      },
      {
         "rules":[
            {
               "field":"field 4"
            }
         ]
      }
   ]
}

如何在 Jquery 中创建所需的 Json 数据？

Answer 1

你可以用递归函数来做到这一点：

function build($query) {
    return {
        rules: $.map($query.children("input, .query"), function (item) {
            return $(item).is("input") ? { field: $(item).val() } : build($(item));
        })
    };
}

const result = build($(".query:first"));

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="query">
    <input type="text" value="Field 1">
    <div class="ignorethis">
        <input type="text" value="Field to ignore">
    </div>
    <div class="query">
        <input type="text" value="Field 2">
        <div class="query">
            <input type="text" value="Field 3">
        </div>
    </div>
    <div class="query">
        <input type="text" value="Field 4">
    </div>
</div>