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>
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"}]
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.
JSON.parse(datosObtenidos)
y verás que ahora sí puedes accederlos como un json y no como un texto.