Consider the following:

https://jsfiddle.net/Twisty/edon2utx/20/

HTML

<div class="widget">
  <h1>Controlgroup</h1>
</div>

JavaScript

$(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"
    }).appendTo(fs);
    $.each(dObj[keys[0]], function(k, v) {
      $("<label>", {
        for: "ticker-" + v.product
      }).html(v.product).appendTo(cg);
      $("<input>", {
        type: "checkbox",
        name: "insurance",
        value: v.product,
        id: "ticker-" + v.product
      }).appendTo(cg);
    });
    if (vert == undefined) {
      cg.controlgroup();
    } else {
      cg.controlgroup({
        "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:

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

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: https://jsfiddle.net/Twisty/edon2utx/26/

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 (
    language.map( (element) => (
      `<label for="ticker_id1">${element.product}</label>
       <input type="checkbox" name="insurance" id="${element.product}">` 
    ))
  )
} 

console.log(mountControlgroup(obj))

Here is a running example