how to pass data in json format to a select?

Question

Hello, I get two JSON, one from other models brands.

{
"data": {
    "JEEP": 40,
    "LAND ROVER": 46,
    "LAMBORGHINI": 42,
    "LIFAN": 43,
    "IVECO": 94,
    "ASIA MOTORS": 5,
    "AM GEN": 1,
    "ENVEMO": 23,
    "WAKE": 77,
    "NISSAN": 59,
    "FIBRAVAN": 26,
    "MASERATI": 52,
    "ROVER": 65,
    "BUGGY": 9,
    "CADILLAC": 14,
    "LADA": 45,
    "LEXUS": 47,
    "CROSS LANDER": 17,
    "PLYMOUTH": 61,
    "VW - VOLKSWAGEN": 75,
    "CHERY": 13,
    "FIAT": 25,
    "SATURN": 68,
    "MAZDA": 54,
    "FORD": 27,
    "MG": 49,
    "CHRYSLER": 15,
    "SMART": 79,
    "ALFA ROMEO": 4,
    "SEAT": 69,
    "RELY": 83,
    "AUDI": 6,
    "TOYOTA": 73,
    "MERCEDES-BENZ": 55,
    "JAGUAR": 39,
    "ROLLS-ROYCE": 84,
    "GM - CHEVROLET": 29,
    "GREAT WALL": 30,
    "HYUNDAI": 34,
    "DAEWOO": 18,
    "MATRA": 53,
    "PONTIAC": 62,
    "FOTON": 82,
    "TESLA": 92,
    "EFFA": 21,
    "LANDWIND": 86,
    "FYBER": 28,
    "SUZUKI": 71,
    "ASTON MARTIN": 81,
    "PEUGEOT": 60,
    "HAFEI": 32,
    "FERRARI": 24,
    "BABY": 93,
    "SAAB": 67,
    "SUBARU": 70,
    "TROLLER": 74,
    "VOLVO": 76,
    "CITROEN": 16,
    "ISUZU": 35,
    "BUGRE": 10,
    "MAHINDRA": 51,
    "RENAULT": 64,
    "ACURA": 95,
    "MERCURY": 56,
    "JPX": 38,
    "DODGE": 20,
    "CBT JIPE": 11,
    "KIA MOTORS": 41,
    "LOTUS": 48,
    "DAIHATSU": 19,
    "MITSUBISHI": 57,
    "SHINERAY": 80,
    "INFINITI": 91,
    "WALK": 78,
    "PORSCHE": 63,
    "BMW": 7,
    "JAC": 36,
    "LOBINI": 44,
    "DKW VEMAG": 85,
    "MCLAREN": 2,
    "MINI": 50,
    "CHANGAN": 12,
    "GURGEL": 31,
    "HITECH ELETRIC": 96,
    "AGRALE": 3,
    "MIURA": 58,
    "TAC": 72,
    "JINBEI": 37,
    "SSANGYONG": 66,
    "BRM": 8,
    "GEELY": 87,
    "PUMA": 89,
    "CHANA": 88,
    "ENGESA": 22,
    "HONDA": 33,
    "RAM": 90
},
"status": "ok"

} this is of models

{
"data": {
    "DUCATO-10": 8,
    "MAREA": 17,
    "DUCATO-8": 10,
    "TEMPRA": 25,
    "DUCATO-15": 9,
    "ELBA": 12,
    "ARGO": 34,
    "GRAND SIENA": 31,
    "COUPE": 5,
    "MOBI": 33,
    "CRONOS": 36,
    "SIENA": 21,
    "TIPO": 26,
    "BRAVA": 2,
    "FREEMONT": 14,
    "IDEA": 15,
    "UNO": 27,
    "PANORAMA": 29,
    "LINEA": 16,
    "OGGI": 30,
    "TORO": 32,
    "FIORINO": 13,
    "BRAVO": 3,
    "DUNA": 11,
    "STRADA": 23,
    "PALIO": 18,
    "CINQUECENTO": 4,
    "PUNTO": 20,
    "STILO": 22,
    "147": 28,
    "500": 1,
    "PREMIO": 19,
    "DOBLO": 6,
    "DUCATO": 7
},
"status": "ok"

}

I want to pass them to select, to stay as in the image below

1st doubt is how to pass from this json format to select

2nd when choosing brands, popular models.

I’m trying to use it this way, but it’s going wrong:

$(document).ready(function () {

    colors = {
      "data": {
          "JEEP": 40,
          "LAND ROVER": 46,
          "JINBEI": 37,
          "SSANGYONG": 66,
          "BRM": 8,
          "GEELY": 87,
          "PUMA": 89,
          "CHANA": 88,
          "ENGESA": 22,
          "HONDA": 33,
          "RAM": 90
      },
      "status": "ok"
    };

  $.each(colors, function(key, value) {
      $('#divSelect').append($("<option/>", {
          value: value,
          text: key
      }));
  });
	
});

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

Answer 1

It’s not working because you’re adding the options to a div, not a select. Try making your html like this:

<div id="divSelect"><select id="idSelect"></select></div>

And replace "#divSelect" with "#idSelect" in your javascript.

Answer 2

I had this code here, see if it helps you :)

var dic = {
   'Cachorro': ['Poodle', 'Bulldog', 'Pinsher'],
   'Gato': ['Gato - Siames', 'Gato - sei la'],
};

$('#animais').on('change', function() {
   var selectValue = $(this).val();
   $('#racas').empty();
   
   for (i = 0; i < dic[selectValue].length; i++) {
      $('#racas').append("<option value='" + dic[selectValue][i] + "'>" + dic[selectValue][i] + "</option>");
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="animais">
  <option value="" disabled selected>Selecione um animal</option>
  <option value="Cachorro">Cachorro</option>
  <option value="Gato">Gato</option>
</select>

<select id="racas">
  <option value="" disabled selected>Selecione uma raca</option>
</select>