0

Estoy obteniendo datos de una api con datos de universidades de todo el mundo, lo cual al seleccionar dicho país me muestra una lista de universidades, pero cuando selección un país me muestra todas las universidades.

Tengo un select donde muestra todos los paises, pero a la hora de seleccionar uno, no me muestra las universidades de ese país en dicha tabla.

Código:

<?php 
    $pais ='';
    $json = file_get_contents("http://universities.hipolabs.com/search?country=".$pais);
    $arreglo = json_decode($json,"false");
    /* masterguru */
for ($i = 0; count($arreglo) > $i; $i++) {
    if (!isset($countries[$arreglo[$i]['country']])) {
        $countries[$arreglo[$i]['country']] = 1;
    }
}
$countries = array_keys($countries);

?>

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS v5.0.2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script type="text/javascript">
      function fetch_select(val)
      {
      $.ajax({
      type: 'post',
      url: 'http://universities.hipolabs.com/search?country=',
      data: {
        get_option:val
      },
      success: function (response) {
        document.getElementById("selector").innerHTML=response; 
      }
      });
      }

    </script>
  </head>
  <body>

  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <div class="container">
          <a class="navbar-brand" href="#">API Universidad</a>
          <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId"
              aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="collapsibleNavId">
              <ul class="navbar-nav me-auto mt-2 mt-lg-0">
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                  </li>
              </ul>
          </div>
    </div>
  </nav>

  <div class="container">
        <div class="mb-3">
          <label class="form-label"></label>
          <select id="selector" class="form-control" onchange="fetch_select(this.value);">
          <?php
            foreach($countries as $post){
                echo "<option>". $post."</option>";
            }
            ?>
          </select>
        </div>
    </div>

  <?php 
  
    echo "<table><thead><tr><td>Nombre</td></tr></thead><tbody>";
    foreach($arreglo as $post){
        //echo "<tr><td>".$post['name']."</td><td>".$post['web_pages'][0]."</td><td>".$post['country']."</td><td>".$post['domains'][0]."</td></tr>";
        echo "<tr><td><a href=". $post['web_pages'][0] .">".$post['name']."</a></td></tr>";
    }
    echo "</tbody></table>";
    
?>
      
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </body>
</html>

Tengo un foreach con el arreglo para la tabla, pero me muestra todos los datos, lo que intento implementar es ajax, aún así no se como podría implementarlo para que al seleccionar un país en dicha tabla aparezca las universidades de ese país.

imagen select

Agradezco cualquier ayuda.

1 respuesta 1

1

Esta es la aproximación que he hecho. Mira a ver si te funciona:

Pasos:

  1. Cambia tu <script> por este parecido que pongo a continuación y en todo caso ponlo antes justo del </body> (es más recomendable por motivos de rapidez de carga de página dejar los scripts al final del documento)

    <script>
    var countries = document.getElementById('countriesList');
    
    function getUni(record) {
      $("#bodyUni").append('<tr><td><a href="' + record.web_pages[0] + '">' + record.name + '</a></td></tr>');
    }
    countries.addEventListener("change", function(event) {
      $.ajax({
        type: "GET",
        contentType: "application/json",
        url: "http://universities.hipolabs.com/search?country=" + countries.value,
        asyn: false,
        success: function(data) {
          $("#bodyUni").empty();
          Object.values(data).forEach(val => getUni(val));
        },
        error: function(jqXHR, textStatus, errorThrown) {
          alert(jqXHR.status);
        },
      });
    });
    </script>
    
  2. Y en tu código HTML quita esto:

      <?php 
    
        echo "<table><thead><tr><td>Nombre</td></tr></thead><tbody>";
        foreach($arreglo as $post){
            //echo "<tr><td>".$post['name']."</td><td>".$post['web_pages'][0]."</td><td>".$post['country']."</td><td>".$post['domains'][0]."</td></tr>";
            echo "<tr><td><a href=". $post['web_pages'][0] .">".$post['name']."</a></td></tr>";
        }
        echo "</tbody></table>";
    
    ?>
    
    
  3. Pon esto antes de cerrar el </div> del container para que los elementos de mi javascript coincidan:

    <table class="table">
      <thead>
        <tr>
          <td>Nombre</td>
        </tr>
      </thead>
      <tbody id="bodyUni">
      </tbody>
    </table>
    
  4. Cambia esto:

    <select id="selector" class="form-control" onchange="fetch_select(this.value);">
    

    por esto

    <select class="form-control" id="countriesList">
    

Y ya está, prueba y dime si te funciona para que pueda documentar los cambios adecuadamente.

4
  • uh genial quedo andando al %100, estoy viendo la documentación de jquery para aprender mas y poder usarlo en lo que es base de datos y poder hacer mas practicas!.
    – Joaqho C
    Commented el 29 dic. 2021 a las 6:25
  • @JoaqhoC Me alegro :-) Si, jquery esta muy bien para empezar con javascript, te evita segun que sintaxis complejas, aunque si acabas aprendiendo bien javascript lo vas a querer dejar porque "pesa" bastante y retrasa la carga los sitios web (ya ves, casi nada en una conexion decente, pero los de pageinsights son muy tikis mikis :-))
    – masterguru
    Commented el 29 dic. 2021 a las 6:34
  • @JoaqhoC Luego (o quizas ya mañana) lo documento, pero no hare más cambios, a mi ya me gusta como esta
    – masterguru
    Commented el 29 dic. 2021 a las 6:35
  • Si @masterguru te agradezco un monton por la ayuda, lo que utilizo mucho es PDO y MySQL, lo que es javascript como que lo toco poco nada solo para hacer cambios minimos como un getElementId y nada mas. Pero agradezco tu consejo! Y de nuevo gracias por la ayuda
    – Joaqho C
    Commented el 29 dic. 2021 a las 6:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.