Javascript parse JSON arrays from multiple groups of checkboxes

Question

I need to make a one array of multiple group of arrays like so:

arr = {arr1:{index:value, index2:value2}, arr2:{index,value, index2:value2}};

My question is if there is any possibility to make it automatically? It's ordered by groups of checkboxes in HTML (example below):

<div class='col-sm1 rights-col'>
<input type='checkbox' data-sec='posts' id='posts-rights'> <span>Příspěvky</span><br />
<input type='checkbox' data-sec='posts' data-action='add' id='posts-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='posts' data-action='edit' id='posts-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='posts' data-action='delete' id='posts-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='posts' data-action='renew' id='posts-renew'> <span>Obnovovat</span>
</div>

<div class='col-sm2 rights-col'>
<input type='checkbox' data-sec='menu' id='menu-rights'> <span>Menu</span><br />
<input type='checkbox' data-sec='menu' data-action='add' id='menu-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='menu' data-action='edit' id='menu-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='menu' data-action='delete' id='menu-delete'> <span>Mazat</span>
</div>

<div class='col-sm3 rights-col'>
<input type='checkbox' data-sec='users' id='users-rights'> <span>Uživatelé</span><br />
<input type='checkbox' data-sec='users' data-action='add' id='users-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='users' data-action='delete' id='users-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='users' data-action='prava' id='users-prava'> <span>Upravovat práva</span><br />
</div>

I'm trying to get an array that looks like this:

arr = {posts:{add:0, edit: 1, delete:0, renew:0}, menu:{add:1, edit:0, delete:1}}; // etc....

Thanks!

Rob M. · Accepted Answer · 2016-02-10 22:55:54Z

1

This should accomplish what you are after. It reduces all of the checkboxes down into an object keyed off of data-sec

var divs = Array.from(document.querySelectorAll('.rights-col input'));
var dataStructure = divs.filter(function(el) {
  // don't include items that are missing data-sec attribute
  return el.getAttribute('data-sec');
}).reduce(function(acc, cur) {
  var bucket = cur.getAttribute('data-sec');
  var action = cur.getAttribute('data-action');
  
  if (!acc[bucket]) {
     acc[bucket] = {}; 
  }
  // set property
  acc[bucket][action] = Number(cur.checked);

  return acc;
}, {});

alert(JSON.stringify(dataStructure));

<div class='col-sm1 rights-col'>
<input type='checkbox' data-sec='posts' id='posts-rights'> <span>Příspěvky</span><br />
<input type='checkbox' data-sec='posts' data-action='add' id='posts-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='posts' data-action='edit' id='posts-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='posts' data-action='delete' id='posts-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='posts' data-action='renew' id='posts-renew'> <span>Obnovovat</span>
</div>

<div class='col-sm2 rights-col'>
<input type='checkbox' data-sec='menu' id='menu-rights'> <span>Menu</span><br />
<input type='checkbox' data-sec='menu' data-action='add' id='menu-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='menu' data-action='edit' id='menu-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='menu' data-action='delete' id='menu-delete'> <span>Mazat</span>
</div>

<div class='col-sm3 rights-col'>
<input type='checkbox' data-sec='users' id='users-rights'> <span>Uživatelé</span><br />
<input type='checkbox' data-sec='users' data-action='add' id='users-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='users' data-action='delete' id='users-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='users' data-action='prava' id='users-prava'> <span>Upravovat práva</span><br />
</div>

edited Feb 10, 2016 at 22:55

answered Feb 10, 2016 at 22:52

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

koca79331 Over a year ago

Thank u very much u save me lot of time, I thinked about some crazy for loop

Rob M. Over a year ago

@PavelKocfelda No problem, I updated it to filter out items without the data-sec property as they were causing null keys on the object.

koca79331 Over a year ago

Should you suggest me some nice book for javascript please?

Rob M. Over a year ago

Sure, checkout Javascript The Good Parts (shop.oreilly.com/product/9780596517748.do), there are some things in there that are really helpful and it's relatively short; Functional Javascript (shop.oreilly.com/product/0636920028857.do); free reading: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… and developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. MDN in general is a good resource.

Selfish · Accepted Answer · 2016-02-10 23:15:25Z

With jQuery, what you are looking for is quite simple: Check the comments in order to understand the code.

Also, note I'm using a button to perform the check, so you can set the configuration before running, but this is just for demonstration.

function check() {
    var result = {};
    // Iterate all checkboxes:  
    $("input:checkbox").each(function(i, elem) {
        elem = $(elem);
        var sec = elem.attr("data-sec");
        var action = elem.attr("data-action");
        // For the ones that have an action set:
        if (action) {
            // Initialise section if needed:
            if (!result[sec]) {
                result[sec] = {};
            }
            // Set value (+will convert Boolean to Number):
            result[sec][action] = +elem.prop("checked");
        }
    });
    // Show result:
    alert(JSON.stringify(result));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="check()">Check</button>
<div class='col-sm1 rights-col'>
<input type='checkbox' data-sec='posts' id='posts-rights'> <span>Příspěvky</span><br />
<input type='checkbox' data-sec='posts' data-action='add' id='posts-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='posts' data-action='edit' id='posts-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='posts' data-action='delete' id='posts-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='posts' data-action='renew' id='posts-renew'> <span>Obnovovat</span>
</div>

<div class='col-sm2 rights-col'>
<input type='checkbox' data-sec='menu' id='menu-rights'> <span>Menu</span><br />
<input type='checkbox' data-sec='menu' data-action='add' id='menu-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='menu' data-action='edit' id='menu-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='menu' data-action='delete' id='menu-delete'> <span>Mazat</span>
</div>

<div class='col-sm3 rights-col'>
<input type='checkbox' data-sec='users' id='users-rights'> <span>Uživatelé</span><br />
<input type='checkbox' data-sec='users' data-action='add' id='users-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='users' data-action='delete' id='users-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='users' data-action='prava' id='users-prava'> <span>Upravovat práva</span><br />
</div>

Collectives™ on Stack Overflow

Javascript parse JSON arrays from multiple groups of checkboxes

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related