2

He tratado de todas las formas que he encontrado, he visto varias preguntas en Stack Overflow e indagado en la web pero no consigo que JavaScript reciba los datos de manera que pueda tratarlos. Estoy recibiendo una consulta de MySQL en AJAX pero es como si JavaScript lo tratase como texto plano. Les dejo los códigos:

JavaScript

/*=============================================
=                 Obtener Tests               =
=============================================*/

const select = document.getElementById("seleccionarTemario");

select.addEventListener("change", () => {
    let opcionSeleccionada = select.options[select.selectedIndex];
    let idTemarioSeleccionado = opcionSeleccionada.value;
    valueSelect = idTemarioSeleccionado;

    console.log(idTemarioSeleccionado);

    ajaxObtenerTests(valueSelect);
});

/*============  End of Obtener Tests  =============*/

/*=============================================
=              AJAX Obtener Tests             =
=============================================*/

let datosObtenidos;

ajaxObtenerTests = (idTemario) => {
    let peticion = new FormData();
    peticion.append("idTemario", idTemario);

    let xhr = new XMLHttpRequest();

    xhr.open("POST", "/src/admin/test/obtenerTests.php", true);

    xhr.onload = function () {
        if (this.status === 200) {
            let datos = this.responseText;
            datosObtenidos = datos;
            verDatos();
        }
    };

    xhr.send(peticion);
};

verDatos = () => {
    console.log(datosObtenidos);
    console.log(datosObtenidos[0].id_test);
};

PHP

<?php

session_start();

require_once($_SERVER["DOCUMENT_ROOT"] . "/src/admin/comprobarAdmin.php");
require_once($_SERVER["DOCUMENT_ROOT"] . "/src/conexionbd.php");

$idTemario = $_POST["idTemario"];

$sqlObtenerTests = "SELECT id_test, nombre_test, ruta_test FROM tests WHERE temario_perteneciente = $idTemario";
$obtenerTests = mysqli_query($conn, $sqlObtenerTests);

$datosTests = [];

while ($row = mysqli_fetch_array($obtenerTests))
{
    array_push($datosTests, $row);
}

echo json_encode($datosTests);

Los datos que recibo en JS son estos:

[{"id_test":"18","nombre_test":"Test","ruta_test":"C:\/xampp\/htdocs\/1PHP\/pages\/contenido temarios\/tests\/Test.php"},{"id_test":"19","nombre_test":"Test 2","ruta_test":"C:\/xampp\/htdocs\/1PHP\/pages\/contenido temarios\/tests\/Test 2.php"}] <script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>

introducir la descripción de la imagen aquí

Me parece que algo que me puede estar dando error está en que se agregan esta cadena al final de el texto del json:

<script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>

Y no entiendo por qué se agrega eso. Me parece que no debería ocurrir.

He eliminado la cadena que mencioné antes pero aún así sigo sin poder tratar la respuesta recibida, agrego código donde se muestra cambio realizado:

xhr.onload = function () {
        if (this.status === 200) {
            let cadena =
                ' <script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>';
            let datos = this.responseText.replace(cadena, "");
            datosObtenidos = datos;
            verDatos();
        }
    };

Después de esa modificación obtengo lo siguiente en el console.log para ver los datos de la variable datosObtenidos:

[{"id_test":"18","nombre_test":"Test","ruta_test":"C:\/xampp\/htdocs\/1PHP\/pages\/contenido temarios\/tests\/Test.php"},{"id_test":"19","nombre_test":"Test 2","ruta_test":"C:\/xampp\/htdocs\/1PHP\/pages\/contenido temarios\/tests\/Test 2.php"}]

introducir la descripción de la imagen aquí

Aún así como se muestra en el console.log final no puedo acceder a los valores.

Quiero tratar los datos en JS como un arreglo o de cualquier forma que me permita recorrer los valores. Si alguien sabe como evitar que me envíe los índices 0,1 y 2, consiguiendo que los índices sean solamente los que tienen nombres le agradeceré.

Si hay alguna otra manera más fácil de obtener el resultado esperado y cualquier sugerencia es bienvenida. Gracias de antemano.

10
  • 1
    creo que deberías cambiar tu forma de devolver los datos. Si no me equivoco, fetch_array, te devolverá un array de cada valor. Trata usando fetch_assoc, o fetch_object que te devuelve el resultado como un objeto.
    – gaidyjg
    el 14 mar. 2021 a las 20:59
  • 1
    @gaidyjg gracias por la ayuda, con assoc y object me libro de los índices numéricos, no obstante sigo teniendo problema para tratar los datos con javascript, hay unas cadenas de texto que aparecen al final que me parece que pueden ser el problema y son estas: <script data-prepros-origin-host="localhost" src="localhost:300/__prepros-server__/prepros.js"> </script> eso no me parece que deba estar ahí. Voy a actualizar la pregunta porque esa info no está el 14 mar. 2021 a las 21:13
  • Eliminé la cadena: <script data-prepros-origin-host="localhost" src="localhost:300/__prepros-server__/prepros.js"> </script> antes de guardarse en la variable y pese a que ahora está libre de esa cadena sigo sin poder tratar la respuesta. Actualizaré la pregunta. el 14 mar. 2021 a las 21:38
  • ¿Por qué? ¿Ahora que error te da?
    – gaidyjg
    el 14 mar. 2021 a las 21:43
  • 1
    Claro, es que cuando recibes los datos de algún api o de un server, debes hacer un JSON.parse de esos datos. Haz JSON.parse(datosObtenidos) y verás que ahora sí puedes accederlos como un json y no como un texto.
    – gaidyjg
    el 14 mar. 2021 a las 21:49

2 respuestas 2

1

Pude resolver mi problema gracias a la ayuda de @gaidyjg, ya que él no publicó una respuesta que contenga la solución pues yo escribo una, muchas gracias.

El problema estaba en parte que debido a que uso prepros me llega al final de la respuesta del servidor esta indeseable cadena: <script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>

En primer lugar tuve que eliminarla, mi función que recibe los datos quedó así:

xhr.onload = function () {
        if (this.status === 200) {
            let cadena =
                ' <script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>';
            let datos = this.responseText.replace(cadena, "");
            datosObtenidos = datos;
            verDatos();
        }
    };

Luego de eso hay que parsear los datos (discúlpenme si no se llama así o me estoy inventando el término) para que javascript los lea como json, quedando la función de la siguiente forma:

xhr.onload = function () {
        if (this.status === 200) {
            let cadena =
                ' <script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>';
            let datos = this.responseText.replace(cadena, "");
            datosObtenidos = JSON.parse(datos);
            mostrarTests();
        }
    };

Y una vez echo todo eso es posible acceder a los datos.

2
  • ¡Felicidades! Me alegra que hayas podido resolver con mi ayuda. Igual, estamos para ayudarnos, sea con mucho o poco. Saludos.
    – gaidyjg
    el 16 mar. 2021 a las 20:19
  • Gracias por todo @gaidyjg, saludos. el 16 mar. 2021 a las 20:20
0

una vez tienes los datos en formato json, simplemente los tienes que leer de la siguiente forma:

datos.forEach(function(elemento, indice){
    console.log("Estas leyendo el registro: " + indice);
    console.log("idtest = " + elemento['idtest']);
    console.log("nombre_test = " + elemento['nombre_test']);
    console.log("ruta_test = " + elemento['ruta_test']);
});
1
  • Gracias por la respuesta pero solamente explica cómo leer los valores, cosa que no era el problema que planteaba, aún así gracias de todos modos. el 16 mar. 2021 a las 20:07

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.