javascript - how to insert data inside an array from each loop in jQuery - Stack Overflow

admin管理员组

文章数量:1332404

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>

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>

• javascript
• jquery
• arrays
• object

Share Improve this question Follow edited May 20, 2017 at 13:58 Rohit Poonia asked May 20, 2017 at 13:31 Rohit PooniaRohit Poonia 7711 silver badge77 bronze badges 15

• 1 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 Commented May 20, 2017 at 13:37
• Post HTML part too. – Pramod Patil Commented May 20, 2017 at 13:38
• Give an example how you want it – alessandrio Commented May 20, 2017 at 13:41
• 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 Commented May 20, 2017 at 13:46
• 1 There is example in the docs I linked to and many tutorials online – charlietfl Commented May 20, 2017 at 13:50

 |  Show 10 more ments

5 Answers 5

Sorted by: Reset to default 2

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

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

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

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>

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");
    });
});

本文标签： javascripthow to insert data inside an array from each loop in jQueryStack Overflow