Создание динамического массива в динамическом массиве в JQuery

Question

У меня есть форма, подобная приведенной ниже, которая содержит шаги, и каждый шаг содержит несколько курсов.

<div class="si-steps"> 
    <input type="text" class="si-step-input" name="step-name"> 
    <input type="text" class="si-step-input" name="step-id"> 
    <div class="si-courses"> 
    <input type="text" class="si-step-input" name="course-name"> 
    <input type="text" class="si-step-input" name="course-id"> 
    </div> 
    <button type="button" id="si-course-btn" class="si-course-btn">Add course</button> 
</div> 
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button> 

Как добавить это правильно, когда я нажимаю кнопки «Добавить шаг» и «Добавить курс»?

мне нужно, чтобы добавить их в этом формате

targetCourse: [{ 
    step-name: 
    step-id: 
    course: [{ 
    course-name: 
    course-id: 
    }] 
}] 

Answer 1

Вы можете извлечь все шаги, используя querySelectorAll. Затем повторите все этапы этой коллекции и соберите имя, идентификатор и курсы, используя querySelector.

Array.prototype.map упростит итерацию.

var stepElements = document.querySelectorAll('.si-steps'); 
 

 
var result = [].map.call(stepElements, function(stepElement) { 
 
    var courseElements = stepElement.querySelectorAll('.si-courses'); 
 
    
 
    var coursesInfo = [].map.call(courseElements, function(courseElement) { 
 
    return { 
 
     'course-name': courseElement.querySelector("[name='course-name']").value, 
 
     'course-id': courseElement.querySelector("[name='course-id']").value 
 
    }; 
 
    }); 
 
    
 
    return { 
 
    'step-name': stepElement.querySelector("[name='step-name']").value, 
 
    'step-id': stepElement.querySelector("[name='step-id']").value, 
 
    'course': coursesInfo 
 
    }; 
 
}); 
 
    
 
document.getElementById('result').innerText = JSON.stringify(result, null, 4);

<div class="si-steps"> 
 
    <input type="text" class="si-step-input" name="step-name" value="step1"> 
 
    <input type="text" class="si-step-input" name="step-id" value="1"> 
 
    <div class="si-courses"> 
 
    <input type="text" class="si-step-input" name="course-name" value="course1"> 
 
    <input type="text" class="si-step-input" name="course-id" id="c1"> 
 
    </div> 
 
    <button type="button" id="si-course-btn" class="si-course-btn">Add course</button> 
 
</div> 
 

 
<div class="si-steps"> 
 
    <input type="text" class="si-step-input" name="step-name" value="step2"> 
 
    <input type="text" class="si-step-input" name="step-id" value="2"> 
 
    <div class="si-courses"> 
 
    <input type="text" class="si-step-input" name="course-name" value="course3"> 
 
    <input type="text" class="si-step-input" name="course-id" id="c3"> 
 
    </div> 
 
    <button type="button" id="si-course-btn" class="si-course-btn">Add course</button> 
 
</div> 
 

 
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button> 
 

 
<div> 
 
    <pre id="result"> 
 
    </pre> 
 
</div>

Обратите внимание, что Add course и Add step кнопки не выполняются. Прокрутите снимок, чтобы увидеть результат.