Optgroup JSON + JS

Question

I am trying to group the result of a json into 2 optgroups.

Follows the JS:

//AJAX CARREGA LOJAS
$(function(){
	$('#estado').change(function(){
	  if( $(this).val() ) {
	    //$('#lojas').hide();
	    $('.carregando').show();
	    $.getJSON('inc/lojas.ajax.php?search=',{cod_estados: $(this).val(), ajax: 'true'}, function(j)
	    {
	      var options = '<option value="">ESCOLHA UMA LOJA...</option>';
	      options += '<optgroup label="Franquias">';
	      for (var i = 0; i < j.length; i++) {
	        options += '<option value="' + j[i].franquias.id_loja + '">' + j[i].franquias.cidade + ' - ' + j[i].franquias.nome_loja + '</option>';
	      }
	      options += '</optgroup>';
	      options += '<optgroup label="Multimarcas">';
	      for (var i = 0; i < j.length; i++) {
	        options += '<option value="' + j[i].multimarcas.id_loja + '">' + j[i].multimarcas.cidade + ' - ' + j[i].multimarcas.nome_loja + '</option>';
	      }
	      options += '</optgroup>';
	    $('#loja').html(options).show();
	    $('.carregando').hide();
	  });

	  }

	});
});

FOLLOWS THE JSON:

{
"franquias": [
{
"id_loja": "147",
"nome_loja": "JARDIM PAULISTA",
"cidade": "ATIBAIA",
"tipo": "Franquia"
}
],
"multimarcas": [
{
"id_loja": "114",
"nome_loja": "LOJA TESTE",
"cidade": "BARUERI",
"tipo": "Multimarca"
}
]
}

Answer 1

A little different in notation, but it follows.

jsonData = {
			"franquias": [
						{
              "id_loja": "147",
              "nome_loja": "JARDIM PAULISTA",
              "cidade": "ATIBAIA",
              "tipo": "Franquia"
						}
      ],
      "multimarcas": [
            {
              "id_loja": "114",
              "nome_loja": "LOJA TESTE",
              "cidade": "BARUERI",
              "tipo": "Multimarca"
            }
			]
	};

function generateOptions(o_key, o_value) {
	let elements = [];
  elements.push('<optgroup label="' + o_key + '"/>');
  jQuery.each(o_value, function(i,o) {
  	elements.push('<option value="' + o.id_loja + '">' + o.nome_loja + ' - ' + o.cidade + "</option>");
  });
  return elements;
}


var options = '<option>ESCOLHA UMA LOJA...</option>';
jQuery.each(jsonData, function(o_key, o_value) {
	options += generateOptions(o_key, o_value).join('\n');
});
$('#loja').html(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="loja">
</select>