Из каждого div получить 4 строчки input и положить значение в массив, затем создать обьект с этим массивом?

Question

[Илья]

Добрый день. Помогите пожалуйста советом.
есть форма для заполнения, код выглядит следующим образом

<div class="input-container" >
                <input type="text" name="parametr" class="custom-input body-input" placeholder="Parametr">
                <input type="text" name="result" class="custom-input body-input" placeholder="Result">
                <select class="custom-input body-input">
                <option value="10^9L">10^9L</option>
                <option value="%">%</option>
                <option value="g/dL">g/dL</option>
                <option value="fL">fL</option>
                <option value="pg">pg</option>
                <option value="fl">fl</option>
                <option value="mg/L">mg/L</option>
                <option value="g/L">g/L</option>
                <option value="mmol/L">mmol/L</option>
                <option value="umol/L">umol/L</option>
                <option value="Ery/uL">Ery/uL</option>
                <option value="none">none</option>
                </select>
                <input type="text" name="range" class="custom-input body-input" placeholder="Normal Range">
                <div class="remove-line" data-name="${counter}">
                                &times;
                              </div>
            </div>

Количество таких блоков может быть от одного до 20. Оно меняется динамически когда пользователь нажимает кнопку добавить строку.
Мне нужно сделать следующее.
Допустим блоков у меня 3

На выходе я должен получить вот такой объект

let context = {
input1: [ "parametr.value", "result.value" , "select.value" , "range.value" ],
input2: [ "parametr.value", "result.value" , "select.value" , "range.value" ],
input3: [ "parametr.value", "result.value" , "select.value" , "range.value" ],
}

Не стану описывать как я извращался с forEach и хотел сделать через цикл for с ограничением в 4 , чтобы после того как цикл forEach снимет 4 значения и сделает их push в массив , он переходил к созданию следующего объекта. В общем я в тупике, прошу подсказки. Спасибо

Answer 1

[0xD34F]

Добавить select'ам атрибут name, как у input'ов.

const data = Array
  .from(document.querySelectorAll('.input-container'))
  .reduce((acc, el, i) => (
    acc[`input${i + 1}`] = [
      'parameter',
      'result',
      'select',
      'range',
    ].map(name => el.querySelector(`[name="${name}"]`).value),
    acc
  ), {});

Comments

[GRO24]

а подскажите, как модернизоровать вариант что бы массив получить c именами инпутов?

input1: [ "inp_name" : "parametr.value",  "inp_name" :  "result.value" , "inp_name" :  "select.value" ,  "inp_name" : 
 "range.value" ],

[0xD34F]

GRO24, я не понимаю, что вы говорите. Попробуйте ещё раз, сделав упор на знание языка - как русского, так и js.

[GRO24]

0xD34F, Вы просите, если бы я имел достаточный уровень знаний языка JS, не стал бы обращаться за помощью на подобные площадки
Вопрос был в том, как я могу вывести массив не только со значениями value, как в вашем примере а input['name'] => value

[0xD34F]

GRO24, вы или делаете, что я сказал, или помощи не ждите.

[GRO24]

0xD34F, надеюсь ваше чсв вам не мешает в жизни))

[0xD34F]

GRO24, лучше побеспокойтесь о своих безграмотности, глупости, лени и наглости.

[GRO24]

0xD34F, я уж научусь со временем) К сожалению, в вашем случае уже ничего не исправить :D

[0xD34F]

GRO24, четырёх с лишним лет не хватило, чтобы разобраться с основами js (например, что такое массивы) - пффф... Не-а, не научитесь. Не успеете. Такими темпами раньше в гроб ляжете.

[GRO24]

0xD34F, я не работал и не работаю с JS, открою вам тайну, возможно, что для вас основы - для других нет
Давайте закончим эту дискуссию

[0xD34F]

GRO24, стандартная отмазка говнокодера. Да-да, конечно же не работаете. А то, что годами сюда ходите с вопросами - так это от нечего делать.