CODEWITHSUNDEEP
javascriptphpjqueryajaxdynamic-arrays
8yt3c0d3
8yt3c0d3

Reputation: 549

Creating a dynamic array within a dynamic array in JQuery

I have a form like this one below, which contains steps and each steps contains multiple courses.

<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>

How do i append these properly when i click on the "Add step" and "Add course" buttons ?

i need to add them in this format

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

Upvotes: 2

Views: 49

Answers (1)

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

You can extract all steps using querySelectorAll. Then, iterate through all steps in this collection and gather name, id and courses using querySelector.

Array.prototype.map will make iteration easier.

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>

Note that Add course and Add step buttons are not implemented. Scroll down the snippet to see result.

Upvotes: 1

Related Questions