JQUERY: remplissage de la boîte de sélection avec le groupe d'options à l'aide du fichier json

Je ne suis pas sûr de ce qui ne va pas avec mon code, j'ai quelques boîtes de sélection avec la classe categorieset je remplis les options avec un objet json.

voici mon fichier json

[{
  "Apparel": [{
    "val": "Footwear",
   "text": "Footwear"
  }, {
   "val": "Lights",
   "text": "Lights"
  }, {
   "val": "Accessories",
   "text": "Accessories"
  }],

  "Automotive Parts": [{
    "val": "Hydraulic Parts",
    "text": "Hydraulic Parts"
   }, {
    "val": "Plastic Parts",
    "text": "Plastic Parts"
   }],
}]

voici mon code jquery.

$.getJSON("json/categories.json", function(json) {
    $.each(json,function (i,optgroups){
      $.each(optgroups, function(groupName, options) {
        var $optgroup = $("<optgroup>", {
                label: groupName
        });

        $optgroup.appendTo('.categories');

        $.each(options, function(j, option) {
                var $option = $("<option>", {
                    text: option.text,
                    value: option.val
                });
                $option.appendTo($optgroup);
            });
      });
    });
});

la boîte de sélection a quelques options et chaque ensemble d'options appartient à un groupe d'options.

le problème est que les libellés des groupes d'options sont uniquement renseignés et non les options.