0

Hago una consulta a la base de datos MySQL, los datos de esta consulta los introduzco en un array que devuelvo al cliente. El array se recibe bien pero a la hora de recorrerlo en el cliente para mostrar los datos, no se hace de forma correcta y no sé que puede estar pasando.

Esta es la petición AJAX que realizo para recibir los datos del servidor

        $.ajax({
        url: './get_carta.php',
        type: 'get',
        data: {categoria: categoria},
        datatype: 'json',

        success: (platosCategoria) => {
            for(let i = 0; i < platosCategoria.length; i++){
                console.log(platosCategoria);
                platoHTML+=
                '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ">'
                    '<div class="offer-item">'
                        '<img src="images/'+platosCategoria[i].IMAGEN+'" alt="" class="img-responsive">'+
                        '<div>'+
                            '<!--<h3>PLATO 1</h3>-->'+
                            '<p>'+platosCategoria[i].PLATO+'</p>'+
                        '</div>'+
                        '<span class="offer-price">'+platosCategoria[i].PRECIO+'</span>'+
                    '</div>'+
                '</div>';
            }
            $('#platos-categoria').html(platoHTML);
        }
    })

Y este es el script PHP

    $query = "SELECT 
            cc.CATEGORIA, 
            c.ID_PLATO, c.PLATO, c.PRECIO, c.IMAGEN
        FROM
            carta c
        INNER JOIN 
            categoria_carta cc ON c.ID_CATEGORIA = cc.ID_CATEGORIA
        WHERE
            cc.CATEGORIA = '$_GET[categoria]'";

$result = $conn->query($query);


while($fila = mysqli_fetch_assoc($result)){
    $platosCategoria[] = $fila;
};

if(!empty($platosCategoria)){
    echo json_encode($platosCategoria);
}else{
    echo "Platos no disponibles";
}

Esta es la respuesta del servidor tras realizar la consulta

Y esto es lo que muestra la consola de Chrome cuando recibo los datos del cliente

Veo que el bucle for se recorre 478 veces, que imagino que son los caracteres que componen el array. He hecho esto muchas veces, con scripts muy parecidos pero no sé por qué en esta ocasión está ocurriendo esto.

Muchas gracias por su ayuda

2
  • Estás haciendo un platosCategoria.length .. de cuanto es ese lenght total ?
    – Excorpion
    Commented el 11 jun. 2021 a las 21:07
  • Posiblemente los 478 caracteres que forman el array sea el length. Pero siempre lo he hecho así y me funcionaba bien. No entiendo por qué en este caso no. Quizás sea un error pequeño que no estoy viendo pero no sé por qué no lo muestra correctamente
    – Luis JM
    Commented el 11 jun. 2021 a las 21:21

1 respuesta 1

2

Podría ser porque estás recibiendo el dato en tipo string, deberías intentar usar JSON.parse, el cual te convertirá el string a un objeto (siempre y cuando tenga una estructura JSON válida)

$.ajax({
    url: './get_carta.php',
    type: 'get',
    data: {
        categoria: categoria
    },
    datatype: 'json',

    success: function(platosCategoria) {
        platosCategoria = JSON.parse(platosCategoria);
        let platoHTML = '';
        for (let i = 0; i < platosCategoria.length; i++) {
            console.log(platosCategoria);
            platoHTML += `<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
            <div class="offer-item">
            <img src="images/${platosCategoria[i].IMAGEN}" alt="" class="img-responsive">
                <div>
                <!--<h3>PLATO 1</h3>-->
                <p>${platosCategoria[i].PLATO}</p>
                </div>
                <span class="offer-price"> ${platosCategoria[i].PRECIO}</span>
                </div>
                </div>`;
        }
        $('#platos-categoria').html(platoHTML);
    }
});

Otra cosa a tener en cuenta, es que tienes errores de sintaxis con las comillas simples, para tener strings de varias líneas, usa Template Strings

Además, estás sobrescribiendo una variable no definida (platoHTML), haciendo que se pueda usar de manera GLOBAL, puedes usar let para definir la variable localmente y que no se salga del scope de la función

1
  • Era la solución. Aún así, en el HTML se muestran 8 elementos en lugar de 4. Gracias por la ayuda. Saludos
    – Luis JM
    Commented el 11 jun. 2021 a las 22:01

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.