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

Question

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.

You don't get administrator,manager,contact,manager as output with this code. — Serge K.
– Serge K., Commented Feb 28, 2018 at 16:56
It already returns an array : if you remove the .join you get ['admin,mgr', 'admin,contact'] - ie an array with 2 entries. Your stated "array of the values i.e" is actually an array of arrays where the inner array only ever has one value. — fdomn-m
– fdomn-m, Commented Feb 28, 2018 at 17:08
Converted to a snippet and changed typo .join to .join() — fdomn-m
– fdomn-m, Commented Feb 28, 2018 at 17:11

Mikey · Accepted Answer · 2018-02-28 16:56:36Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related