Div Checkboxes group by attribute

HI have few checkboxes with some attributes inside div. Assuming all checkboxes are checked.

 <div id="osVersion">
    <input type="checkbox" id="chk1" osid="1" versionid="21" />
    <input type="checkbox" id="chk2" osid="2" versionid="22" />
    <input type="checkbox" id="chk3"  osid="2" versionid="11" />
    <input type="checkbox" id="chk4" osid="1" versionid="1" />
    <input type="checkbox" id="chk5" osid="3" versionid="55" />
    <input type="checkbox" id="chk6" osid="2" versionid="45" />
    <input type="checkbox" id="chk7" osid="3" versionid="78" />

</div>

I am able to push the attrs into a array like this

  var osVersions = [];
    function showOutput() {

        $("#osVersion input:checked").each(function (i) {

            osVersions.push({ "osid": $(this).attr("osid"), "versionid": $(this).attr("versionid") });

           // osVersions.versions.push($(this).attr("versionid"));
        });
      }

i want to create a json object filtered based on osid in the below format

{
"osversions" : [
    {
        "osId" : 1,
        "versions" : [21,1]
    },{
        "osId" : 2,
        "versions" : [22,11,45]
    },{
        "osId" : 3,
        "versions" : [55,78]
    }
],
"name" : "test",
"xyz":"test"

}

confused on how to filter..

Answer

You can use a loop like

$('button').click(function() {
  var obj = {
      "osversions": [],
      "name": "test",
      "xyz": "test"
    },
    tmp = {};
  $("#osVersion input:checked").each(function() {
    var $this = $(this),
      osid = $this.attr('osid');
    if (!tmp[osid]) {
      tmp[osid] = {
        "osId": osid,
        "versions": []
      };
      obj.osversions.push(tmp[osid]);
    }
    tmp[osid].versions.push($this.attr('versionid'))
  });
  //here obj is a properly formatted object
  console.log(obj)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="osVersion">
  <input type="checkbox" id="chk1" osid="1" versionid="21" />
  <input type="checkbox" id="chk2" osid="2" versionid="22" />
  <input type="checkbox" id="chk3" osid="2" versionid="11" />
  <input type="checkbox" id="chk4" osid="1" versionid="1" />
  <input type="checkbox" id="chk5" osid="3" versionid="55" />
  <input type="checkbox" id="chk6" osid="2" versionid="45" />
  <input type="checkbox" id="chk7" osid="3" versionid="78" />
</div>
<button>Test</button>

Demo: Fiddle

Leave a Reply

Your email address will not be published. Required fields are marked *