Read a JSON array and print it in HTML

user_14073051 0
Viewed 398

I have developed the following exercise, I must ensure that according to the department it shows me the cities that correspond to it based on the JSON file, so far I have managed to show me the departments in their selected selections, but I have not managed to show me only the cities that corresponds to each department in their respective selects. My code is the following: enter image description here

DATA JSON

{ 
    "Amazonas": ["Leticia","El encanto","La Chorrera","La Pedrera","Miritiparaná","Puerto Alegría","Puerto Arica","Puerto Nariño","Puerto Santader"], 
    "Atlántico": ["Baranoa","Baranoa","Barranquilla","Campo de la Cruz","Candelaría","Galapa","San Juan de Acosta","Luruaco", "Malambo","Manatí","Palmar de Varela","Piojo","Polo Nuevo","Ponedera","Puerto Colombia","Repelón","Sabanagrande","Sabanalarga","Santa Lucía","Santo Tomás","Soledad","Suan","Tubara","Usiacurí"], 
    "Caquetá": ["Albania","Belén de los Andaquíes","Cartagena del Chaira","Curillo","El Doncello","El Paujil","Florencia","La Montañita","Milan","Morelia","Puerto Rico","San José de Fragua","San Vicente del Caguán","Solano","Solita","Valparaíso"], 
    "Cesar": ["Aguachica","Agustín Codazzi","Astrea","Becerril","Bosconia","Chimichagua","Chiriguaná","Curumaní","El Copey","El Paso","Gamarra","González","La Gloria","La Jagua","Ibirico","Manaure","Pailitas","Pelaya","Pueblo Bello","Río de Oro","Robles la Paz","San Alberto","San Diego","San Martín","Tamalameque","Valledupar"], 
    "Chocó": ["Acandi","Alto Baudo","Atrato","Bagado","Bahía Solano","Belén de bajirá","Bajo Baudo","Bojayá","Cantón de San Pablo","Carmen del Darién","Certeguí","Condoto","El Carmen","Istmina","Jurado","Litoral del San Juan","Lloró","Medio Atrato","Medio Baudo","Medio San Juan","Novita","Nuquí","Quibdó","Río Iro","Río Quito","Riosucio","San José del Palmar","Sipí","Tado","Unguía","Unión Panamericana"], 
    "Córdoba": ["Ayapel","Buenavista","Canalete","Cerete","Chima","Chinu","Ciénaga de Oro","Cotorra","La Apartada","Lorica","Los Córdobas","Momil","Moñitos","Montelibano","Montería","Planeta Rica","Pueblo Nuevo","Puerto Escondido","Puerto Libertador","Purísima","Sahagun","San Andrés","Sotavento","San Antero","San Bernardo Viento","San Carlos","San Pelayo","Tierralta","Tuchin","Valencia"], 
    "Guainía": ["Inírida","Barranco Minas","Cacahual","La Guadalupe","Mapiripana","Morichal","Pana Pana","Puerto Colombia","San Felipe"], 
    "Guaviare": ["Calamar","El Retorno","Miraflores","San José del Guaviare"], 
    "Huila": ["Acevedo","Agrado","Aipe","Algeciras","Altamira","Baraya","Campoalegre","Colombia","Elias","Garzón","Gigante","Guadalupe","Hobo","Íquira","Isnos","La Argentina","La Plata","Nataga","Neiva","Oporapa","Paicol","Palermo","Palestina","Pital","Pitalito","Rivera","Saladoblanco","San Agustín","Santa María","Suaza","Tarqui","Tello","Teruel","Tesalia","Timana","Villavieja","Yaguará"], 
    "La Guajira": ["Riohacha","Albania","Barranca","Dibulla","Distracción","El Molino","Fonseca","La Jagua del Pilar","Maicao","Manaure","San Juan del Cesar","Urumita","Villa Nueva"], 
    "Putumayo": ["Colón","Mocoa","Orito","Puerto Asís","Puerto Caicedo","Puerto Guzman","Leguizamo","San Francisco","San Miguel","Santiago","Sibundoy","Valle del Guamuez","Villagarzón"], 
    "Quindío": ["Armenia","Buenavista","Calarca","Circasia","Córdoba","Filandia","Genova","La Tebaida","Montenegro","Pijao","Quimbaya","Salento"], 
    "San Andrés y Providencia": ["Providencia","San Andrés y Providencia"], 
    "Sucre": ["Buenavista","Caimito","Chalán","Colosó","Coveñas","Corozal","El Roble","Galeras","Guaranda","La Unión","Los Palmitos","Majagual","Morroa","Ovejas","Palmito","Sampués","San Benito Abad","San Juan de Betulia","San Marcos","San Onofre","San Pedro","Sincé","Sincelejo","Sucre","Tolú","Toluviejo"], 
    "Tolima": ["Alpujarra","Alvarado","Ambalema","Anzoátegui","Ataco","Cajamarca","Carmen de Apicalá","Casabianca","Chaparral","Coello","Coyaima","Cunday","Dolores","Espinal","Falán","Flandes","Fresno","Guamo","Guayabal","Herveo","Honda","Ibagué","Icononzo","Lérida","Líbano","Mariquita","Melgar","Murillo","Natagaima","Ortega","Palocabildo","Piedras","Planadas","Prado","Purificación","Rioblanco","Roncesvalles","Rovira","Saldaña","San Antonio","San Luis","Santa Isabel","Suárez","Valle de San Juan","Venadillo","Villahermosa","Villarrica"], 
    "Vaupés": ["Cacarú","Mitú","Papunaua","Pacoa","Taraira","Yavaraté"], 
    "Vichada": ["Cumaribó","La Primavera","Puerto Carreño","Santa Rosalia"] 
}

CODE JS

$(function(){
    var departamentoOptions;
    var ciudadOptions;
    $.getJSON('colombia.json', function(result){
        $.each(result, function(departamento){
            departamentoOptions += "<option value'"+departamento+"'>"+departamento+"</option>";
        });
        $('#departamento').html(departamentoOptions);
    });



    $('#departamento').change(function(){

        $.getJSON('colombia.json', function(result){


            $.each(result, function(i, ciudad){
                ciudadOptions+="<option value'"+ciudad+"'>"+ciudad+"</option>";
                                

            });

            $('#ciudad').html(ciudadOptions);
        });
    });
});

CODE HTML

    <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
      <select name="" id="departamento">
         <option value=""></option>
     </select>  
     <select name="" id="ciudad">
         <option value=""></option>
     </select>  

    <script src="js/jquery-3.5.1.js"></script>
    <script src="importar.js"></script>
    </body>
    </html>
matrix html json ajax javascript
2 Answers

You need to get value of department select-box and then check match it with the json data you have then if match found you can use each loop to iterate through datas .Also i have added var ciudadOptions = ""; under your change event currently you are just appending values without emptying it .

Demo Code( I have removed ajax which was not needed in this demo code) :

//demo data
var result = {
  "Amazonas": ["Leticia", "El encanto", "La Chorrera", "La Pedrera", "Miritiparaná", "Puerto Alegría", "Puerto Arica", "Puerto Nariño", "Puerto Santader"],
  "Atlántico": ["Baranoa", "Baranoa", "Barranquilla", "Campo de la Cruz", "Candelaría", "Galapa", "San Juan de Acosta", "Luruaco", "Malambo", "Manatí", "Palmar de Varela", "Piojo", "Polo Nuevo", "Ponedera", "Puerto Colombia", "Repelón", "Sabanagrande", "Sabanalarga", "Santa Lucía", "Santo Tomás", "Soledad", "Suan", "Tubara", "Usiacurí"],
  "Caquetá": ["Albania", "Belén de los Andaquíes", "Cartagena del Chaira", "Curillo", "El Doncello", "El Paujil", "Florencia", "La Montañita", "Milan", "Morelia", "Puerto Rico", "San José de Fragua", "San Vicente del Caguán", "Solano", "Solita", "Valparaíso"]
}



$(function() {
  var departamentoOptions;


  $.each(result, function(departamento) {
    departamentoOptions += "<option value'" + departamento + "'>" + departamento + "</option>";
  });
  $('#departamento').html(departamentoOptions);

  $('#departamento').change(function() {
    //decalre this
    var ciudadOptions = "";
    //get valueof dropdown
    var value = $(this).val();
    $.each(result, function(i, ciudad) {
      //check if value of dropdown is same
      if (i == value) {
        //loop through that array
        $.each(ciudad, function(index, value) {
          ciudadOptions += "<option value'" + value + "'>" + value + "</option>";
        }); //close each loop
      } //close if
    });

    $('#ciudad').html(ciudadOptions);

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <select name="" id="departamento">
    <option value=""></option>
  </select>
  <select name="" id="ciudad">
    <option value=""></option>
  </select>


</body>

</html>

user_106064000

Every time the departmento select is changed, you are populating the ciudad select. You never empty the options added from the previous time the departmento select was changed.

$('#departamento').change(function(){

//empty any previously loaded options
    $('#ciudad').html('');
    $.getJSON('colombia.json', function(result){


        $.each(result, function(i, ciudad){
//do you need to loop through the array of values?
          $.each(ciudad, function(i, c){
//added an = here (value=""), not (value"")
            ciudadOptions+="<option value='"+c+"'>"+c+"</option>";
                            })

        });

        $('#ciudad').html(ciudadOptions);
    });
});
user_22617330
Related