how to insert data inside an array from each loop in jQuery

Question

From last 5 hours i am trying to solve out one single thing and think almost made it but stuck somewhere due to which not getting the result i want. I think here i need a bit expert level help to rectify where i am doing wrong.

var eduarray = [];
$('.education-groupbox').each(function(index, el) {
    eduarray[index] = [];   
    var s = $(this).attr('id');
    //console.log();
    $('#'+s+' .inputs').each(function(key, value) {

        //eduarray['index'].push("rohit");

    });

});

What i am trying to get is the result in format of object with multiple array from the each each loop so that i can send the data through formdata and process the php form.

 <div id="education-groupboxwrapper">
                    <div id="education-groupbox" class="education-groupbox">
                      <div class="inputs col-3">
                        <label for="email">Bölüm</label>
                        <input type="text" name="email" />
                      </div>
                      <div class="inputs col-3">
                        <label for="email">Okul Adı</label>
                        <input type="text" name="email" />
                      </div>
                      <div class="inputs col-3">
                        <label for="email">Bölüm</label>
                        <input type="text" name="email" />
                      </div>
                      <div class="inputs col-3">
                        <label for="email">Bölüm</label>
                        <input type="text" name="email" />
                      </div>
                    </div> 
                  </div>

why is inputs with s, in $('#'+s+' inputs') ? also please consider posting a Minimal, Complete, and Verifiable example with minimum required code within the question, i.e your HTML structure — Mi-Creativity
– Mi-Creativity, Commented May 20, 2017 at 13:37
sorry for the html part missed .. i have added it now .. you may also visit here and check the current running form rohitchoudhary.in/caliphp/register_account — Rohit Poonia
– Rohit Poonia, Commented May 20, 2017 at 13:46
There is example in the docs I linked to and many tutorials online — charlietfl
– charlietfl, Commented May 20, 2017 at 13:50

Alon Eitan · Accepted Answer · 2017-05-20 14:16:05Z

This is how you do it:

$(function() {
  $('button').on('click', function() {
    var eduarray = {};
    $('.education-groupbox').each(function(index, el) {
        var s = $(this).attr('id');
        eduarray[s] = [];   
        $(this).find('input').each(function(key, value) {
          eduarray[s].push( $(this).val() );
        })
    });

    console.log(eduarray);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupboxwrapper">
  <div id="education-groupbox" class="education-groupbox">
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" />
    </div>
    <div class="inputs col-3">
      <label for="email">Okul Adı</label>
      <input type="text" name="email" />
    </div>
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" />
    </div>
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" />
    </div>
  </div> 
</div>

<button>SAVE</button>

I created an object (rather than array), and iterate over '.education-groupbox'. For each element I created a new array inside that object, based on the element's ID. Next, on each element in the loop, I selected all the inputs ($(this).find('input')), and pushed them to the array.

You can also save the label of each input (If you need it) like this:

$(function() {
  $('button').on('click', function() {
    var eduarray = {};
    $('.education-groupbox').each(function(index, el) {
        var s = $(this).attr('id');
        eduarray[s] = {};   
        $(this).find('.inputs').each(function(key, value) {
          var $el = $(this),
              label = $el.children('label').html()
          if( 'undefined' === typeof eduarray[s][ label ] ) { eduarray[s][ label ] = []; }
          eduarray[s][ label ].push( $el.children('input').val() );
        })
    });

    console.log(eduarray);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupboxwrapper">
  <div id="education-groupbox" class="education-groupbox">
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" />
    </div>
    <div class="inputs col-3">
      <label for="email">Okul Adı</label>
      <input type="text" name="email" />
    </div>
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" />
    </div>
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" />
    </div>
  </div> 
</div>

<button>SAVE</button>

Dalin Huang · Accepted Answer · 2017-05-20 14:06:30Z

1

From your code you I found some bug, $('#'+s+' inputs').each won't work since ID are unique, use class instead so you can have multiple inputs under same input group with the same class name.

Use eduarray[index].push($(this).val()); to push value into array.

$('.education-groupbox').each will loop though each block of HTML for <div class="education-groupbox"> therefore inside the each using $(this).find('input') will return all input inside this block, then you can use each to push all input value to the array.

var eduarray = [];
$('.education-groupbox').each(function(index, el) {
  var _this = $(this);
  eduarray[index] = [];
  _this.find('input').each(function(key, v) {
    eduarray[index].push(v.value);
  });

});

console.log('eduarray[0] -->' + eduarray[0]);
console.log('eduarray[1] -->' + eduarray[1]);
console.log('eduarray    -->' + eduarray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="education-groupboxwrapper">
  <!-- groupbox 1 -->
  <div class="education-groupbox">
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" value="test1" />
    </div>
    <div class="inputs col-3">
      <label for="email">Okul Adı</label>
      <input type="text" name="email" value="test2" />
    </div>
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" value="test3" />
    </div>
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" value="test4" />
    </div>
  </div>
  <!-- groupbox 2 -->
  <div class="education-groupbox">
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" value="test111" />
    </div>
    <div class="inputs col-3">
      <label for="email">Okul Adı</label>
      <input type="text" name="email" value="test222" />
    </div>
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" value="test333" />
    </div>
    <div class="inputs col-3">
      <label for="email">Bölüm</label>
      <input type="text" name="email" value="test444" />
    </div>
  </div>
</div>

edited May 20, 2017 at 14:06

answered May 20, 2017 at 13:57

Dalin Huang

11.3k5 gold badges35 silver badges49 bronze badges

5 Comments

Rohit Poonia Over a year ago

thanks for the brief Daniel . I hope this helps let me try once Thanks

Rohit Poonia Over a year ago

thanks for the updated code. but i am getting Uncaught TypeError: Cannot read property 'push' of undefined at HTMLDivElement.<anonymous> (register_jobseeker.js:159)

Dalin Huang Over a year ago

@RohitPoonia _this.find('input').each(function(key, v) { eduarray[index].push(v.value); });

Rohit Poonia Over a year ago

hey i got it eduarray[index].push there is a mistake i did in here and you saved my day man. Thanks a lot

Rohit Poonia Over a year ago

Let us continue this discussion in chat.

alessandrio · Accepted Answer · 2017-05-20 14:05:48Z

1

Do not forget that the classes in jQuery are with a .[myClass]

$(function () {
  var eduarray = [];
  function submit() {
    $('.education-groupbox').each(function (index, el) {
      eduarray[index] = [];
      var s = $(this).attr('id');
      $('#' + s + ' .inputs').each(function (key, value) {
        //You have to do it like the previous one but here if you add the data
        eduarray[index][key] = $(value).find("input").val();
      });
    });
  }
  //Then you call the function only when you send
  $("button").click(function () {
    submit();
    console.log(eduarray);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="education-groupboxwrapper"><div id="education-groupbox1" class="education-groupbox"><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Okul Adı</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div></div><div id="education-groupbox2" class="education-groupbox"><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Okul Adı</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div></div></div>

<button>submit</button>

answered May 20, 2017 at 14:05

alessandrio

4,3802 gold badges31 silver badges42 bronze badges

3 Comments

Rohit Poonia Over a year ago

hey avril . what if i have a select box in place of input in just two inputs class like this: <div class="education-groupbox"> <div class="inputs col-3"> <label for="email">Okul Adı</label> <select name=""> <option>Name</option> </select> </div> <div class="inputs col-3"> <label for="email">Bölüm</label> <input type="text" name="email" value="test3" /> </div> </div>

Rohit Poonia Over a year ago

how do i get the value from both different fields

alessandrio Over a year ago

@RohitPoonia put: if($(value).find("input").length){/*input tag*/}else{/*option tag*/}

Pramod Patil · Accepted Answer · 2017-05-20 14:04:08Z

You can try with below way.I have pre populated the html value to get scenario work. Please change accordingly.
JS

<script>
        $(document).ready(function(){
          var eduarray = [];
        $('.education-groupbox').each(function(index, el) {
        eduarray[index] = [];   
        var s = $(this).attr('id');
        console.log(s);
        $('#'+s+' input[type=text]').each(function(key, html) {
            eduarray[index].push(html.value); 

        });

        });
        console.log(eduarray)
        })
    </script>

HTML

<div id="education-groupboxwrapper">
                    <div id="education-groupbox" class="education-groupbox">
                      <div class="inputs col-3">
                        <label for="email">Bölüm</label>
                        <input type="text" name="email" value="123" />
                      </div>
                      <div class="inputs col-3">
                        <label for="email">Okul Adı</label>
                        <input type="text" name="email" value="456" />
                      </div>
                      <div class="inputs col-3">
                        <label for="email">Bölüm</label>
                        <input type="text" name="email" value="789"/>
                      </div>
                      <div class="inputs col-3">
                        <label for="email">Bölüm</label>
                        <input type="text" name="email" value="abc" />
                      </div>
                    </div> 
                  </div>

Sagar Jajoriya · Accepted Answer · 2017-05-20 13:48:51Z

-2

Hope it will work

var eduarray = {};
$('.education-groupbox').each(function(index, el) {
    eduarray.index = [];   
    var s = $(this).attr('id');

    $('#'+s+' input').each(function(key, value) {
        eduarray['index'].push("your value");
    });
});

edited May 20, 2017 at 13:48

answered May 20, 2017 at 13:45

Sagar Jajoriya

2,3751 gold badge12 silver badges18 bronze badges

1 Comment

charlietfl Over a year ago

"Hope it will work" doesn't explain anything that you did differently. Not to mention that inputs is an invalid selector

Collectives™ on Stack Overflow

how to insert data inside an array from each loop in jQuery

5 Answers 5

Comments

5 Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related