Solution 1 :

Consider the following:


<div class="widget">


$(function() {
  var myObj = [{
      "javascript": [{
          "product": "1234"
          "product": "4321"
      "python": [{
        "product": "9876"

  function makeGroup(dObj, tObj, vert) {
    var keys = Object.keys(dObj);
    var fs = $("<fieldset>").appendTo(tObj);
    var legend = $("<legend>").html(keys[0]).appendTo(fs);
    var cg = $("<div>", {
      class: "controlgroup"
    $.each(dObj[keys[0]], function(k, v) {
      $("<label>", {
        for: "ticker-" + v.product
      $("<input>", {
        type: "checkbox",
        name: "insurance",
        value: v.product,
        id: "ticker-" + v.product
    if (vert == undefined) {
    } else {
        "direction": "vertical"

  $.each(myObj, function(i, g) {
    makeGroup(g, $(".widget"));

There were many issues with your Fiddle. I corrected these first.

In regards to iterating your Object, there are lots of ways to do this. I built a function that builds one group, largely off the following template:

  <div class="controlgroup">
    <label for="ticker-{Value}">{Value}/label>
    <input type="checkbox" name="insurance" value="{Value}" id="ticker-{Value}">

You need a fieldset for each group, this becomes the container for all the control elements in that group.

If you had a vertical control, you can use it like so:

makeGroup({ php: [{ product: 9876 }] }, $(".widget"), true);

The final parameter is optional. Example:

Problem :

I want to create a controlgroup with categories (languages) and childs (checkbox). I’m getting a little confused on resources I’m finding, wheter if I should use map/filter/redude or if I should use Objects.key, Objects.value and for in loops.

I can get to loop through the childs with map but I canĀ“t get to go on the outer loop.

obj = [
    "javascript": [
      {"product": "1234"},
      {"product": "4321"}
    "python": [
      {"product": "9876"}

// This is what I'm trying
const mountControlgroup = (language) => {
  return ( (element) => (
      `<label for="ticker_id1">${element.product}</label>
       <input type="checkbox" name="insurance" id="${element.product}">` 


Here is a running example


Comment posted by How do I ask a good question?

How do I ask a good question?

Comment posted by Arturas Lapinskas

You can use both of them

Comment posted by Bernardo Marques

what were the problems with my fiddle? Also I’m checking

Comment posted by

@BernardoMarques do not confuse


Leave a Reply

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