0

Hola estoy haciendo una petición get a una api que e creado y esta bien el problema es que cuando quiero mostrar los datos en una modal los datos se repiten la primera vez que abro el modal me muestran los datos de manera correcta pero si abro otro modal los datos se repiten Este es mi petición tipo get que trae los datos de los usuario y los muestro en un modal

function asignarusariobjetivo(id){
        $('#usario_modal').modal('toggle');
        $.get('api/tickets_api/user',function(data){
            $.each(data, function(i,item){
               $('#usuario_ticke').append('<option value="'+ item.id +'">'+ item.name +' '+item.lastname +'</option>');
            }); 
        }); 
    }
<div class="modal fade" id="usario_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Asignar Usuario</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="row">
                <form method="POST" id="formulario">
                     @csrf
                    <div class="row">
                        <div class="form-group col-12">
                            <label for="estado">MODAL:</label><br>
                            <select name="users_id" id="usuario_ticke" class="form-select">

                            </select>
                        </div>
                        <div class="form-group col-12">
                            <input type="button" id="btn-ingresar" class="btn-submit btn btn-primary" value="Agregar" />
                        </div>
                    </div>
                </form> 
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
</div> 
asi es como se repiten los datos

introducir la descripción de la imagen aquí

3
  • que datos son los que tienes en esa api
    – Luis
    Commented el 23 may. 2023 a las 23:55
  • los datos de los usuarios
    – JL DIAZ
    Commented el 23 may. 2023 a las 23:59
  • Saludos. Por lo que leo de tu código; el error puede estar en tu flujo; en la función que comparte no estás limpiando antes de poblar el select; es por ello que cada vez que invocas tu función asignarusariobjetivo se agregan más elemento sobre los que ya existen. Commented el 24 may. 2023 a las 0:13

1 respuesta 1

3

¡Hola! Prueba con esto:

function asignarusariobjetivo(id){
            $('#usario_modal').modal('toggle');
            $.get('api/tickets_api/user',function(data){
                $('#usuario_ticke').empty();
                $.each(data, function(i,item){
                   $('#usuario_ticke').append('<option value="'+ item.id +'">'+ item.name +' '+item.lastname +'</option>');
                }); 
            }); 
        }

Agregué

$('#usuario_ticke').empty();

para eliminar los elementos option dentro del select de esa forma cada vez que mandes a llamar tu funcion no se repitan los option en tu select. Te dejo la documentación: https://api.jquery.com/empty/ ¡Saludos!

1
  • 1
    Gracias me ayudo tu respuesta
    – JL DIAZ
    Commented el 24 may. 2023 a las 0:20

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.