Как пройти по DOM и собрать данные с input в древовидный объект?

Question

[Мелан Альботов]

Как обойти input страницы и записать их значения в древовидный объект? Все блоки добавляются динамически, их количество не ограниченно.

html разметка:

<div id="form" class="form">
<div class="block1">
  <input type="text" placeholder="Дата" id="date">
  <input type="text" placeholder="Вид загрузки" id="carType">
  <div class="block2" id="1">
    <input type="text" class="out" placeholder="Исходящий" id="1">
    <div class="add4">4</div>
    <div class="block3" id="1">
      <input type="text" class="point" placeholder="Пункт" id="1">
      <div class="add3">3</div>
      <div class="block4" id="1">
        <input type="text" class="car" placeholder="ТС" id="1">
        <div class="add2">2</div>
        <div class="block5" id="1">
          <div class="add1">1</div>
          <input type="file" class="amount" id="1">

        <input type="file" class="amount" id="2"></div>
      </div>
    <div class="block4" id="2">
        <input type="text" class="car" placeholder="ТС" id="2">
        
        <div class="block5" id="1">
          <div class="add1">1</div>
          <input type="file" class="amount" id="1">

        <input type="file" class="amount" id="2"></div>
      </div></div>
  <div class="block3" id="2">
      <input type="text" class="point" placeholder="Пункт" id="2">
      
      <div class="block4" id="1">
        <input type="text" class="car" placeholder="ТС" id="1">
        <div class="add2">2</div>
        <div class="block5" id="1">
          <div class="add1">1</div>
          <input type="file" class="amount" id="1">

        <input type="file" class="amount" id="2"></div>
      </div>
    <div class="block4" id="2">
        <input type="text" class="car" placeholder="ТС" id="2">
        
        <div class="block5" id="1">
          <div class="add1">1</div>
          <input type="file" class="amount" id="1">

        <input type="file" class="amount" id="2"></div>
      </div></div></div>
<div class="block2" id="2">
    <input type="text" class="out" placeholder="Исходящий" id="2">
    
    <div class="block3" id="1">
      <input type="text" class="point" placeholder="Пункт" id="1">
      <div class="add3">3</div>
      <div class="block4" id="1">
        <input type="text" class="car" placeholder="ТС" id="1">
        <div class="add2">2</div>
        <div class="block5" id="1">
          <div class="add1">1</div>
          <input type="file" class="amount" id="1">

        <input type="file" class="amount" id="2"></div>
      </div>
    <div class="block4" id="2">
        <input type="text" class="car" placeholder="ТС" id="2">
        
        <div class="block5" id="1">
          <div class="add1">1</div>
          <input type="file" class="amount" id="1">

        <input type="file" class="amount" id="2"></div>
      </div></div>
  <div class="block3" id="2">
      <input type="text" class="point" placeholder="Пункт" id="2">
      
      <div class="block4" id="1">
        <input type="text" class="car" placeholder="ТС" id="1">
        <div class="add2">2</div>
        <div class="block5" id="1">
          <div class="add1">1</div>
          <input type="file" class="amount" id="1">

        <input type="file" class="amount" id="2"></div>
      </div>
    <div class="block4" id="2">
        <input type="text" class="car" placeholder="ТС" id="2">
        
        <div class="block5" id="1">
          <div class="add1">1</div>
          <input type="file" class="amount" id="1">

        <input type="file" class="amount" id="2"></div>
      </div></div></div></div>
<button class="sub-btn" id="btn">Отправить</button>

Пример заполненной формы:


Как при помощи нативного JavaScript или при помощи jQuery (Или других библиотек) получить данные со всех полей с сохранением иерархии в древовидный объект?
Пример объекта которого я хочу получить:

var array = {
block1_1: {
    value: "1123",
    block2_1: {
        value: "1",
        block3_1: {
            value: "Т700АК",
            block5_1: {
                value: "1.mp4"
            },
            block5_2: {
                value: "2.mp4"
            }
        },
        block3_2: {
            value: "Т654АК",
            block5_1: {
                value: "3.mp4"
            },
            block5_2: {
                value: "4.mp4"
            }
        }
    },
    block2_2: {
        value: "2",
        block3_1: {
            value: "Т689АК",
            block5_1: {
                value: "5.mp4"
            },
            block5_2: {
                value: "6.mp4"
            }
        },
        block3_2: {
            value: "Т669АК",
            block5_1: {
                value: "7.mp4"
            },
            block5_2: {
                value: "8.mp4"
            }
        }
    },
},
block1_2: {
    value: "1124",
    point_1: {
        value: "1",
        block3_1: {
            value: "Т692АК",
            block5_1: {
                value: "9.mp4"
            },
            block5_2: {
                value: "10.mp4"
            }
        },
        block3_2: {
            value: "Е404ОН",
            block5_1: {
                value: "11.mp4"
            },
            block5_2: {
                value: "12.mp4"
            }
        }
    },
    point_2: {
        value: "2",
        block3_1: {
            value: "Н190МТ",
            block5_1: {
                value: "13.mp4"
            },
            block5_2: {
                value: "14.mp4"
            }
        },
        block3_2: {
            value: "О839МУ",
            block5_1: {
                value: "15.mp4"
            },
            block5_2: {
                value: "16.mp4"
            }
        }
    }
}
};

Comments

[Rsa97]

А как вы пробовали и что именно у вас не получилось?

[Мелан Альботов]

Rsa97, я в принципе не нашел информации как этой сделать и могу только предполагать как это можно сделать. Даже если я смогу этого как-то добиться, я сомневаюсь, что это будет правильное решение. В моем представлении я должен циклом пройти по dom и в зависимости parent-child отношений заносить это в объект, чтобы оставалась такая же иерархия, а id использовать, чтобы сохранить порядок элементов. В литературе, гайдах и статьях которые я смотрел по теме я не нашел решение подобных задач, а если и находил что-либо, то это было совсем отдалённо похоже. P.S. думал отдавать эти данные в Python, в виде JSON.

Answer 1

[Александр]

Например так:

const makeTree = (root) => {
    const tree = {};

    const step = (root, branch) => {
        root.querySelectorAll(':scope > [class^="block"]').forEach((element, index) => {
            const className = [...element.classList.values()].find(
                (className) => className.startsWith('block')
            ) ?? element.className;
            const key = `${className}_${index + 1}`;

            branch[key] = {};

            const control = element.querySelector(':scope > input');
            if (control) {
                branch[key].value = control.value;
            }

            step(element, branch[key]);
        });
    };

    step(root, tree);

    return tree;
};

const tree = makeTree(document.body);
console.log(tree);

или так

const makeTree = (root) => {
    const tree = {};

    const step = (root, branch) => {
        root.querySelectorAll(':scope > [class^="block"]').forEach((element, index) => {
            const className = [...element.classList.values()].find(
                (className) => className.startsWith('block')
            ) ?? element.className;
            const key = `${className}_${index + 1}`;

            const controls = element.querySelectorAll(':scope > input');
            branch[key] = {
                values: [...controls].reduce((acc, control) => {
                    if (control.id) {
                        acc[control.id] = control.value;
                    }

                    return acc;
                }, {})
            };

            step(element, branch[key]);
        });
    };

    step(root, tree);

    return tree;
};

const tree = makeTree(document.body);
console.log(tree);

Comments

[Мелан Альботов]

Возвращает пустой объект

[Мелан Альботов]

А нет! Работает, правда не пойму как это все работает. Не мой уровень.