Question

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

例如我的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>

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

1 个答案: