Skip to main content
Agregar fragmento de código
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
    function mostrarClases(){

        datos = { 
            "opcion"  : "mostrarClases",
            "search": $('#search').val()
            
        };
        console.log(datos);
              
        $.ajax({
            url:'../controllers/clasesController.php',
            type:'POST',
            dataType: 'json', // jQuery va a convertir la respuesta en JSON
            data: datos
            
        }).done(function(response){
            // Tomas directamente los datos sin tener que "convertir"
            var data = response.respuesta;
            var msj = response.msj;
            var success = response.success; 


            html="<table class='table table-bordered table-hover'><thead><tr><td><strong>Nombre clase</strong></td><td><strong>Tipo de servicio</strong></td><td><strong>Tipo de programa</strong></td><td><strong>Editar</strong></td><td><strong>Activo</strong></td></tr></thead><tbody>";
    

            if(success){
                // No uses eval(), ya tienes un objeto JSON válido
                var valores = data;
                for(i=0; i < valores.length; i++){
                    // Guarda el objeto codificado
                    var datos = JSON.stringify(valores[i]);

                    html+="<tr><td>"+valores[i][9]+"</td><td>"+valores[i][12]+"</td><td>"+valores[i][11]+"</td><td><i id='edit' data-toggle='modal' data-target='#editarClase' style='cursor:pointer;' onclick='mostrarEditClase("+'"'+datos+'"'+");' class='fa fa-cog' aria-hidden='true'></i></td>";

                    if(valores[i][8] == 1){

                        html+='<td><div class="checkbox"><label style="padding-right: 30px;"><input type="checkbox" name="Estado" id="Estado'+valores[i][0]+'" onclick="cambiarEstado('+valores[i][0]+')" checked></label></div></td>';

                    }else if (valores[i][8] == 2 ){

                        html+='<td><div class="checkbox"><label style="padding-right: 30px;"><input type="checkbox" name="Estado" id="Estado'+valores[i][0]+'" onclick="cambiarEstado('+valores[i][0]+')"></label></div></td>';
                    }
                        
                }

                html+="</tbody></table>"

                $("#lista").html(html);

            }else{

                html+="<tr><td colspan='6'>"+msj+"</td></tr></tbody></table>"

                $("#lista").html(html);
            }

            $("#loader").css("display", "none");
            $("#content").css("display", "block");   
                    
        });
                
                           
    }

    function mostrarEditClase(datos){
        // Convierte el objeto codificado en JSON
        var d = JSON.parse(datos);

        // Se guardó el objeto completo
        // deberás revisar nuevamente los índices
        $("#Id_clase").val(d[0]);

        $("#Nombre_clase").val(d[9]);

        $("#Id_programa_actual").val(d[1]);
        document.getElementById("Id_programa_actual").innerText = d[11];

        $("#Id_servicio_actual").val(d[2]);
        document.getElementById("Id_servicio_actual").innerText = d[12];

        $("#Id_categoria_actual").val(d[3]);
        document.getElementById("Id_categoria_actual").innerText = d[13];

        $("#Id_subcategoria_actual").val(d[4]);
        document.getElementById("Id_subcategoria_actual").innerText = d[14];

        $("#Id_metas_actual").val(d[7]);
        document.getElementById("Id_metas_actual").innerText = d[15];

        $("#Id_nivel_actual").val(d[6]);
        document.getElementById("Id_nivel_actual").innerText = d[16];

        $("#Id_alcance_actual").val(d[5]);
        document.getElementById("Id_alcance_actual").innerText = d[17];

        Duracion = moment.duration(d[18]).asMinutes();

        Duracion += " Minutos";

        $("#Duracion_clase_actual").val(d[9]);
        document.getElementById("Duracion_clase_actual").innerText = Duracion; 

        $("#Descripcion").val(d[10]);  
 
    
        
    }

Agrego un fragmento de código para ver que no hay problema si alguno de los datos incluye saltos de línea:

// Origen de datos con saltos de línea
let response = [
  {
    0: 'Nombre',
    1: 'Dirección',
    2: `Un texto
con saltos
de línea`,
    3: 'Más info'
  }
];

let divDatos = document.querySelector('#datos');

// Codificar como cadena
let codificado = JSON.stringify(response[0]);
console.log(codificado);

document.querySelector('#btn').addEventListener('click', () => {
    divDatos.innerHTML = '';
    // Obtener JSON de la cadena codificada
    let data = JSON.parse(codificado);
    console.log(data);
    let lineas = data[2].split("\n");
    lineas.forEach(linea => divDatos.innerHTML += linea + '<br>');
});
<div id="datos">Aquí se van a mostrar los datos</div>
<button id="btn">Mostrar datos</button>

    function mostrarClases(){

        datos = { 
            "opcion"  : "mostrarClases",
            "search": $('#search').val()
            
        };
        console.log(datos);
              
        $.ajax({
            url:'../controllers/clasesController.php',
            type:'POST',
            dataType: 'json', // jQuery va a convertir la respuesta en JSON
            data: datos
            
        }).done(function(response){
            // Tomas directamente los datos sin tener que "convertir"
            var data = response.respuesta;
            var msj = response.msj;
            var success = response.success; 


            html="<table class='table table-bordered table-hover'><thead><tr><td><strong>Nombre clase</strong></td><td><strong>Tipo de servicio</strong></td><td><strong>Tipo de programa</strong></td><td><strong>Editar</strong></td><td><strong>Activo</strong></td></tr></thead><tbody>";
    

            if(success){
                // No uses eval(), ya tienes un objeto JSON válido
                var valores = data;
                for(i=0; i < valores.length; i++){
                    // Guarda el objeto codificado
                    var datos = JSON.stringify(valores[i]);

                    html+="<tr><td>"+valores[i][9]+"</td><td>"+valores[i][12]+"</td><td>"+valores[i][11]+"</td><td><i id='edit' data-toggle='modal' data-target='#editarClase' style='cursor:pointer;' onclick='mostrarEditClase("+'"'+datos+'"'+");' class='fa fa-cog' aria-hidden='true'></i></td>";

                    if(valores[i][8] == 1){

                        html+='<td><div class="checkbox"><label style="padding-right: 30px;"><input type="checkbox" name="Estado" id="Estado'+valores[i][0]+'" onclick="cambiarEstado('+valores[i][0]+')" checked></label></div></td>';

                    }else if (valores[i][8] == 2 ){

                        html+='<td><div class="checkbox"><label style="padding-right: 30px;"><input type="checkbox" name="Estado" id="Estado'+valores[i][0]+'" onclick="cambiarEstado('+valores[i][0]+')"></label></div></td>';
                    }
                        
                }

                html+="</tbody></table>"

                $("#lista").html(html);

            }else{

                html+="<tr><td colspan='6'>"+msj+"</td></tr></tbody></table>"

                $("#lista").html(html);
            }

            $("#loader").css("display", "none");
            $("#content").css("display", "block");   
                    
        });
                
                           
    }

    function mostrarEditClase(datos){
        // Convierte el objeto codificado en JSON
        var d = JSON.parse(datos);

        // Se guardó el objeto completo
        // deberás revisar nuevamente los índices
        $("#Id_clase").val(d[0]);

        $("#Nombre_clase").val(d[9]);

        $("#Id_programa_actual").val(d[1]);
        document.getElementById("Id_programa_actual").innerText = d[11];

        $("#Id_servicio_actual").val(d[2]);
        document.getElementById("Id_servicio_actual").innerText = d[12];

        $("#Id_categoria_actual").val(d[3]);
        document.getElementById("Id_categoria_actual").innerText = d[13];

        $("#Id_subcategoria_actual").val(d[4]);
        document.getElementById("Id_subcategoria_actual").innerText = d[14];

        $("#Id_metas_actual").val(d[7]);
        document.getElementById("Id_metas_actual").innerText = d[15];

        $("#Id_nivel_actual").val(d[6]);
        document.getElementById("Id_nivel_actual").innerText = d[16];

        $("#Id_alcance_actual").val(d[5]);
        document.getElementById("Id_alcance_actual").innerText = d[17];

        Duracion = moment.duration(d[18]).asMinutes();

        Duracion += " Minutos";

        $("#Duracion_clase_actual").val(d[9]);
        document.getElementById("Duracion_clase_actual").innerText = Duracion; 

        $("#Descripcion").val(d[10]);  
 
    
        
    }
    function mostrarClases(){

        datos = { 
            "opcion"  : "mostrarClases",
            "search": $('#search').val()
            
        };
        console.log(datos);
              
        $.ajax({
            url:'../controllers/clasesController.php',
            type:'POST',
            dataType: 'json', // jQuery va a convertir la respuesta en JSON
            data: datos
            
        }).done(function(response){
            // Tomas directamente los datos sin tener que "convertir"
            var data = response.respuesta;
            var msj = response.msj;
            var success = response.success; 


            html="<table class='table table-bordered table-hover'><thead><tr><td><strong>Nombre clase</strong></td><td><strong>Tipo de servicio</strong></td><td><strong>Tipo de programa</strong></td><td><strong>Editar</strong></td><td><strong>Activo</strong></td></tr></thead><tbody>";
    

            if(success){
                // No uses eval(), ya tienes un objeto JSON válido
                var valores = data;
                for(i=0; i < valores.length; i++){
                    // Guarda el objeto codificado
                    var datos = JSON.stringify(valores[i]);

                    html+="<tr><td>"+valores[i][9]+"</td><td>"+valores[i][12]+"</td><td>"+valores[i][11]+"</td><td><i id='edit' data-toggle='modal' data-target='#editarClase' style='cursor:pointer;' onclick='mostrarEditClase("+'"'+datos+'"'+");' class='fa fa-cog' aria-hidden='true'></i></td>";

                    if(valores[i][8] == 1){

                        html+='<td><div class="checkbox"><label style="padding-right: 30px;"><input type="checkbox" name="Estado" id="Estado'+valores[i][0]+'" onclick="cambiarEstado('+valores[i][0]+')" checked></label></div></td>';

                    }else if (valores[i][8] == 2 ){

                        html+='<td><div class="checkbox"><label style="padding-right: 30px;"><input type="checkbox" name="Estado" id="Estado'+valores[i][0]+'" onclick="cambiarEstado('+valores[i][0]+')"></label></div></td>';
                    }
                        
                }

                html+="</tbody></table>"

                $("#lista").html(html);

            }else{

                html+="<tr><td colspan='6'>"+msj+"</td></tr></tbody></table>"

                $("#lista").html(html);
            }

            $("#loader").css("display", "none");
            $("#content").css("display", "block");   
                    
        });
                
                           
    }

    function mostrarEditClase(datos){
        // Convierte el objeto codificado en JSON
        var d = JSON.parse(datos);

        // Se guardó el objeto completo
        // deberás revisar nuevamente los índices
        $("#Id_clase").val(d[0]);

        $("#Nombre_clase").val(d[9]);

        $("#Id_programa_actual").val(d[1]);
        document.getElementById("Id_programa_actual").innerText = d[11];

        $("#Id_servicio_actual").val(d[2]);
        document.getElementById("Id_servicio_actual").innerText = d[12];

        $("#Id_categoria_actual").val(d[3]);
        document.getElementById("Id_categoria_actual").innerText = d[13];

        $("#Id_subcategoria_actual").val(d[4]);
        document.getElementById("Id_subcategoria_actual").innerText = d[14];

        $("#Id_metas_actual").val(d[7]);
        document.getElementById("Id_metas_actual").innerText = d[15];

        $("#Id_nivel_actual").val(d[6]);
        document.getElementById("Id_nivel_actual").innerText = d[16];

        $("#Id_alcance_actual").val(d[5]);
        document.getElementById("Id_alcance_actual").innerText = d[17];

        Duracion = moment.duration(d[18]).asMinutes();

        Duracion += " Minutos";

        $("#Duracion_clase_actual").val(d[9]);
        document.getElementById("Duracion_clase_actual").innerText = Duracion; 

        $("#Descripcion").val(d[10]);  
    }

Agrego un fragmento de código para ver que no hay problema si alguno de los datos incluye saltos de línea:

// Origen de datos con saltos de línea
let response = [
  {
    0: 'Nombre',
    1: 'Dirección',
    2: `Un texto
con saltos
de línea`,
    3: 'Más info'
  }
];

let divDatos = document.querySelector('#datos');

// Codificar como cadena
let codificado = JSON.stringify(response[0]);
console.log(codificado);

document.querySelector('#btn').addEventListener('click', () => {
    divDatos.innerHTML = '';
    // Obtener JSON de la cadena codificada
    let data = JSON.parse(codificado);
    console.log(data);
    let lineas = data[2].split("\n");
    lineas.forEach(linea => divDatos.innerHTML += linea + '<br>');
});
<div id="datos">Aquí se van a mostrar los datos</div>
<button id="btn">Mostrar datos</button>

Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Deberías usar JSON codificado en lugar de crear una cadena que "no puedes controlar".

Para empezar, evita el uso de JSON.parse y eval(), no son necesarios si desde que defines la petición AJAX especificas que vas a recibir la respuesta en JSON.

    function mostrarClases(){

        datos = { 
            "opcion"  : "mostrarClases",
            "search": $('#search').val()
            
        };
        console.log(datos);
              
        $.ajax({
            url:'../controllers/clasesController.php',
            type:'POST',
            dataType: 'json', // jQuery va a convertir la respuesta en JSON
            data: datos
            
        }).done(function(response){
            // Tomas directamente los datos sin tener que "convertir"
            var data = response.respuesta;
            var msj = response.msj;
            var success = response.success; 


            html="<table class='table table-bordered table-hover'><thead><tr><td><strong>Nombre clase</strong></td><td><strong>Tipo de servicio</strong></td><td><strong>Tipo de programa</strong></td><td><strong>Editar</strong></td><td><strong>Activo</strong></td></tr></thead><tbody>";
    

            if(success){
                // No uses eval(), ya tienes un objeto JSON válido
                var valores = data;
                for(i=0; i < valores.length; i++){
                    // Guarda el objeto codificado
                    var datos = JSON.stringify(valores[i]);

                    html+="<tr><td>"+valores[i][9]+"</td><td>"+valores[i][12]+"</td><td>"+valores[i][11]+"</td><td><i id='edit' data-toggle='modal' data-target='#editarClase' style='cursor:pointer;' onclick='mostrarEditClase("+'"'+datos+'"'+");' class='fa fa-cog' aria-hidden='true'></i></td>";

                    if(valores[i][8] == 1){

                        html+='<td><div class="checkbox"><label style="padding-right: 30px;"><input type="checkbox" name="Estado" id="Estado'+valores[i][0]+'" onclick="cambiarEstado('+valores[i][0]+')" checked></label></div></td>';

                    }else if (valores[i][8] == 2 ){

                        html+='<td><div class="checkbox"><label style="padding-right: 30px;"><input type="checkbox" name="Estado" id="Estado'+valores[i][0]+'" onclick="cambiarEstado('+valores[i][0]+')"></label></div></td>';
                    }
                        
                }

                html+="</tbody></table>"

                $("#lista").html(html);

            }else{

                html+="<tr><td colspan='6'>"+msj+"</td></tr></tbody></table>"

                $("#lista").html(html);
            }

            $("#loader").css("display", "none");
            $("#content").css("display", "block");   
                    
        });
                
                           
    }

    function mostrarEditClase(datos){
        // Convierte el objeto codificado en JSON
        var d = JSON.parse(datos);

        // Se guardó el objeto completo
        // deberás revisar nuevamente los índices
        $("#Id_clase").val(d[0]);

        $("#Nombre_clase").val(d[9]);

        $("#Id_programa_actual").val(d[1]);
        document.getElementById("Id_programa_actual").innerText = d[11];

        $("#Id_servicio_actual").val(d[2]);
        document.getElementById("Id_servicio_actual").innerText = d[12];

        $("#Id_categoria_actual").val(d[3]);
        document.getElementById("Id_categoria_actual").innerText = d[13];

        $("#Id_subcategoria_actual").val(d[4]);
        document.getElementById("Id_subcategoria_actual").innerText = d[14];

        $("#Id_metas_actual").val(d[7]);
        document.getElementById("Id_metas_actual").innerText = d[15];

        $("#Id_nivel_actual").val(d[6]);
        document.getElementById("Id_nivel_actual").innerText = d[16];

        $("#Id_alcance_actual").val(d[5]);
        document.getElementById("Id_alcance_actual").innerText = d[17];

        Duracion = moment.duration(d[18]).asMinutes();

        Duracion += " Minutos";

        $("#Duracion_clase_actual").val(d[9]);
        document.getElementById("Duracion_clase_actual").innerText = Duracion; 

        $("#Descripcion").val(d[10]);  

    
        
    }

Como recomendación final, deberías usar arreglos asociativos en lugar de numéricos, porque es mucho más fácil de mantener usando datos.nombreDeCampo que datos[x]; imagina que tienes que agregar otro campo en la consulta, te obligará a revisar y (probablemente) modificar todos los índices en tus funciones Javascript.