CODEWITHSUNDEEP
javascriptjqueryarrayshtml
wattry
wattry

Reputation: 994

Return an array in jQuery map() function's callback

I have a checkbox form control that can return multiple values per checkbox. I need the roles jQuery map() function to return an array of the values i.e. [['administrator,manager'], [administrator,conatct]].

This question was answered however does not work for my implementation: Using map function to get lists' data attributes into an array in jQuery.

let roles = $('input.rolesHidden:checked').map(function() {
  return this.value;
}).get().join();

console.log(roles);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="form-check remove-user">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <p><label class="form-check-label" for="test.dev.webadd"></label><input name="groups" class="form-check-input remove-user-form" value="nis.test.dev.webadd" type="checkbox"> nis.test.dev.webadd</p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12 text-left">
      <p><label class="form-check-label" for="test.dev.webadd"></label><input name="roles" class="rolesHidden" id="test.dev.webadd" value="administrator,manager" type="checkbox" checked='checked'> administrator,manager</p>
    </div>
  </div>
  <div class="form-check remove-user">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <p><label class="form-check-label" for="test.dev.webadd2"></label><input name="groups" class="form-check-input remove-user-form" value="test.dev.webadd2" type="checkbox"> test.dev.webadd2</p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12 text-left">
      <p><label class="form-check-label" for="test.dev.webadd2"></label><input name="roles" class="rolesHidden" id="test.dev.webadd2" value="contact,manager" type="checkbox" checked='checked'> contact,manager</p>
    </div>
  </div>

output>> administrator,manager,contact,manager

I have tried wrapping [this.value] and like this [[this.value]], however it just returns a single array of values.

Upvotes: 0

Views: 607

Answers (1)

Mikey
Mikey

Reputation: 6766

Use [[this.value]] and remove the .join.

$(function() {
  let roles = $('input.rolesHidden:checked').map(function() {
    return [[this.value]];
  }).get();

  console.log(roles);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="form-check remove-user">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <p><label class="form-check-label" for="test.dev.webadd"></label><input name="groups" class="form-check-input remove-user-form" value="nis.test.dev.webadd" type="checkbox"> nis.test.dev.webadd</p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12 text-left">
      <p><label class="form-check-label" for="test.dev.webadd"></label><input name="roles" class="rolesHidden" id="test.dev.webadd" value="administrator,manager" type="checkbox" checked> administrator,manager</p>
    </div>
  </div>
  <div class="form-check remove-user">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <p><label class="form-check-label" for="test.dev.webadd2"></label><input name="groups" class="form-check-input remove-user-form" value="test.dev.webadd2" type="checkbox"> test.dev.webadd2</p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12 text-left">
      <p><label class="form-check-label" for="test.dev.webadd2"></label><input name="roles" class="rolesHidden" id="test.dev.webadd2" value="contact,manager" type="checkbox" checked> contact,manager</p>
    </div>
  </div>

Upvotes: 2

Related Questions