1

Estoy intentando hacer una llamada una API, que me devuelve una serie de datos en JSONP. Luego creo una serie de filas con varios campos y por último el usuario debe seleccionar una de esas filas pinchando sobre ella y debo recuperar el valor de una de las celdas.

He llamado #res al tbody de la tabla.

Mi problema es que una vez que hago click sobre alguna de la filas, no logro recuperar el valor de la celda con clase "identificador" , que es la que necesito. El código es el siguiente.

i

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "http://www.cartociudad.es/geocoder/api/geocoder/candidatesJsonp?q=calle%20iglesia%205,%20madrid&limit=4",
        data: "data",
        dataType: "JSONP"        
    })
    .done (function (data) { 
        let direcciones=data;
        let tabla=$('#tabla');
        direcciones.forEach(direccion => {
            var tr = document.createElement('tr');
                tr.innerHTML = '<td class="identificador">' + direccion.id+ '</td>' +
                '<td>' + direccion.address + '</td>' +
                '<td>' + direccion.stateMsg + '</td>';
               tabla.append(tr);       
                     
        });        
      
            
       
    });
    $('#res').click(function() { 
        var Fila=$(this).closest('tr');
        var Identificador=Fila.find(".identificador").text();
        console.log(Identificador);    
   
 })

});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
    <div class="container">
        <div class="form-group">
            <input type="text" name="inputCand" class="form-group" id="inputCand" placeholder="e.g Rúa Roma, 6 15707 Santiago de Compostela">
            <button class="btn btn-default" type="submit" id="inputCandButton" title="Buscar candidatos">Buscar</button>
                       
        </div>

    </div>

    <div class="container">
        <table id="tabla" class="table table-striped">
            <thead>
                <tr>
                    <th>Identificador</th>
                    <th>Dirección</th>
                    <th>Municipio</th>
                </tr>         
            </thead>
            <tbody id="res">
                

            </tbody>
            
            
        </table>
    </div>
    

       
       

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="main copy.js"></script>
</body>
</html>

1
  • ¿Podrías editar la pregunta para añadir el HTML de tu tabla?
    – phpMyGuel
    Commented el 5 oct. 2021 a las 9:52

1 respuesta 1

1

Tienes varios problemas de funcionalidad que te impiden conseguir lo que te propones. Trataré de desglosarlos para que veas exactamente en que estás errando:

  • Las filas que creas a través de la respuesta de la llamada AJAX las estás añadiendo al <table>. Deberías añadirlas al <tbody> que es donde deberían ir.

  • La función click la estás vinculando correctamente al <tbody>, pero lo que te interesa es que el elemento que la dispare sea cada una de las filas, para poder recuperar el valor de la que se haya pulsado y buscar la celda que necesitas dentro. Para ello puedes servirte del segundo parámetro, opcional de la función on() para indicar cual de los hijos del elemento al que vinculas el evento quieres que sea el que lo dispare (en tu caso te interesa que sean los <tr>).

  • Dentro de la función click() tienes varios errores, a la hora de tratar de moverte por el DOM y que no voy a detallar. Revisa lo que hacen estas en la documentación oficial.

Deberías hacer algo similar a esto:

$(function() {
  obten_datos();
  
  // Función que al hacer click en un <tr> de la tabla, busca el <td> con la clase
  // identificador y muestra su contenido por consola.
  $('#res').on('click', 'tr', function() {
    const fila = $(this);
    const identificador = fila.find('.identificador').text();
    
    console.log(identificador);
  });
});

// Con esta función simulo la obtención de datos que haces a través de la llamada
// AJAX.
function obten_datos () {
  const direcciones = [
    {
      id: 1,
      address: 'Direccion1',
      stateMsg: 'Estado1',
    },
    {
      id: 2,
      address: 'Direccion2',
      stateMsg: 'Estado2',
    },
    {
      id: 3,
      address: 'Direccion3',
      stateMsg: 'Estado3',
    },
  ];
  const tabla = $('#tabla');
  
  direcciones.forEach(direccion => {
    const tr = document.createElement('tr');
    
    tr.innerHTML = '<td class="identificador">' + direccion.id+ '</td>' +
      '<td>' + direccion.address + '</td>' +
      '<td>' + direccion.stateMsg + '</td>';
    tabla.find('#res').append(tr); 
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tabla" class="table table-striped">
  <thead>
    <tr>
      <th>Identificador</th>
      <th>Dirección</th>
      <th>Municipio</th>
    </tr>         
  </thead>
  <tbody id="res"></tbody>
</table>

1
  • Voy a darle otra vuelta teniendo en cuenta tu respuesta. Muchas gracias por tu tiempo.!
    – Noob
    Commented el 5 oct. 2021 a las 15:25

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.