Создать вложенные данные Json в соответствии с HTML структурой

Question

Я работаю над настраиваемым построителем запросов Jquery, я завершил часть пользовательского интерфейса со всеми полями и вложенными элементами, теперь я застреваю при экспорте данных в формате 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"
            }
         ]
      }
   ]
}

как я могу создать необходимые данные Json в Jquery?

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>