0

Estoy tratando de crear un select dinámico con AJAX, ya lo he conseguido, extraigo bien los datos y todo. El problema está en que necesito añadir option a ese select, dependiendo de si el id es uno u otro. Es decir, si el ID es 1, la option será x, sien embargo si el ID es 2, la option sera Y... He probado con if else, if solos y no lo hace bien, siempre se me queda en el primer resultado, es decir si el ID es 1 pone todos los option en X... Necesito hacerlo con ajax, porque esto solo lo hago cuando hago click en un check box, para que muestre todos los resultados... Mi código actual es este.

Tabla dinámica

$.ajax({
    url: '/listarIncidencias',
    type: 'GET',
    success:function (data) {

        //limpiamos toda la tabla antes de nada
        $("#tablaIncidenciasTotales tbody tr").empty();

        // recorremos los datos y creamos la tabla dinámica
        for(var item of data){
            
            $("#tablaIncidenciasTotales tbody").append(`
                <tr>
                    <td>${item.cod_incidencia}</td>
                    <td>${item.fecha_solicitud}</td>
                    <td>${item.asunto}</td>
                    <td>${item.categoria}</td>
                    <td>
                        <select class="tecnicos">

                        </select>
                    </td>
                    <td>${item.nombre}</td>
                    <td>${item.prioridad}</td>
                    <td><a href='/asignarIncidencia/${item.cod_incidencia}' class='btn btn-danger'><i class='fas fa-1x fa-hammer asignar'></i></td>
                    <td>
                        <select class='estado'>"
                            <option>${item.estado}</option>
                            <option value="en seguimiento">En seguimiento</option>
                            <option value="finalizada">Finalizada</option>
                        </select>
                    </td>
                    <td><a href="/mostrarActuaciones/${item.cod_incidencia}" class='btn btn-danger'><i class="fas fa-1x fa-clipboard seguimiento"></i></button></td></a>
                </tr>
            `);

        }// FIN FOR

Añado los option a el select con class tecnicos

for(let i=0; i<data.length; i++){
            
            if(data[i]["asignadoA"] == null){

                $(".tecnicos option").append(`
                    <option value="0" selected>Sin asignar</option>
                `);
            }else if(data[i]["asignadoA"] == 1){
                $(".tecnicos option").append(`
                    <option value="1" selected>Fernando Reyes</option>
                `);
            }
            /*if(data[i]["asignadoA"] == 1){

                $(".tecnicos option").append(`
                    <option value="1" selected>Fernando Reyes</option>
                `);
            }

            if(data[i]["asignadoA"] == 2){

                $(".tecnicos option").append(`
                    <option value="2" selected>Victor Baena</option>
                `);
            }*/
            /*else if(data[i]["asignadoA"] == 3){
                $(".tecnicos").append(`
                    <option value="3" selected>Fernando Burgos</option>
                `);
            }
            else if(data[i]["asignadoA"]== 4){
                $(".tecnicos").append(`
                    <option value="4" selected>Roberto Quero</option>
                `);
            }
            else if(data[i]["asignadoA"] == 5){
                $(".tecnicos").append(`
                    <option value="5" selected>David Serrano</option>
                `);
            }
            else if(data[i]["asignadoA"] == ""){
                $(".tecnicos").append(`
                    <option value="" selected>null</option>
                `);
            }
            else{
                $(".tecnicos").append(`
                    <option value="null" selected>Error</option>
                `);
            }
        }// FIN FOR*/

He probado a meter el append(option) dentro del for-each donde monto la tabla, pero tampoco hace nada... Espero me puedan ayudar.

Gracias de antemano

Un saludo

2
  • Por la forma de tu llamado. que a mi modo de ver debiera ser post, estás recibiendo texto plano en data. para recorrerlo como JSON debes convertirlo y no lo haces. consulta: Trabajando con JSON ¿No te resultaría mejor hacerlo del lado del servidor y devolver el bloque html listo? Solo tendrías que hacer algo como $("#tablaIncidenciasTotales tbody").html(data); y acto seguido llamar a un método que "rebobine" observadores y manejadores de eventos.
    – quevedo
    Commented el 25 sept. 2020 a las 17:47
  • Creo que deberías recibir dos arreglos, uno para técnicos y otro para incidencias, de forma que puedas llenar el select de técnicos disponibles y no solo uno para cada incidencia.
    – Triby
    Commented el 25 sept. 2020 a las 18:03

1 respuesta 1

0

Al recorrer el arreglo data para crear la tabla se puede evaluar de una vez el elemento actual item dentro de un switch y de ahí guardar el valor que tendrá el option dentro de una variable. Luego se inserta esa variable dentro del select.

$.ajax({
        url: '/listarIncidencias',
        type: 'GET',
        success:function (data) {
    
            //limpiamos toda la tabla antes de nada
            $("#tablaIncidenciasTotales tbody tr").empty();
    
            // recorremos los datos y creamos la tabla dinámica
            for(var item of data){
               
               let optionValue = '';   
    
               switch(item.asignadoA){
                  case null:
                     optionValue = `<option value="0" selected>Sin asignar</option>`;
                  break;
                  case 1:
                     optionValue = `<option value="1" selected>Fernando Reyes</option>`;
                  break;
               }        
    
               
                
                $("#tablaIncidenciasTotales tbody").append(`
                    <tr>
                        <td>${item.cod_incidencia}</td>
                        <td>${item.fecha_solicitud}</td>
                        <td>${item.asunto}</td>
                        <td>${item.categoria}</td>
                        <td>
                            <select class="tecnicos">
                                 ${optionValue}
                            </select>
                        </td>
                        <td>${item.nombre}</td>
                        <td>${item.prioridad}</td>
                        <td><a href='/asignarIncidencia/${item.cod_incidencia}' class='btn btn-danger'><i class='fas fa-1x fa-hammer asignar'></i></td>
                        <td>
                            <select class='estado'>"
                                <option>${item.estado}</option>
                                <option value="en seguimiento">En seguimiento</option>
                                <option value="finalizada">Finalizada</option>
                            </select>
                        </td>
                        <td><a href="/mostrarActuaciones/${item.cod_incidencia}" class='btn btn-danger'><i class="fas fa-1x fa-clipboard seguimiento"></i></button></td></a>
                    </tr>
                `);
    
            }// FIN FOR
1
  • Muchas gracias @Lobos Efectivamente, habia pensado n un switch pero lo estaba implementando al final, y bueno, no domino esa estructura de control muy bien, Pero ya está, lo tendré presente si se me da el caso en otra ocasión. Muchas gracias
    – scorpions
    Commented el 25 sept. 2020 a las 18:18

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.