Hola a todos, estoy haciendo ejercicios con JSON y JS en alguna manipulación de DATOS porque me gustó mucho y quiero aprender. Esta vez estoy tratando de manejar algunos datos JSON de MySql enviando JSON y manejando por Javascript. Con los datos recibidos, quiero crear algunas opciones usando Javascript, hasta cierto punto recibo y manejo todo como debe ser, también en mi HTML puedo crear como deberían las opciones de los autores "nombres completos", pero hasta allí ... todo se detiene allí. .
En la consola aparece Uncaught TypeError: No se pueden leer las propiedades de undefined (leyendo 'id o nombre completo o leesonid o nombre de la lección') y de alguna manera se atasca en la primera función<<optionscreateauthors(ourData.auth);>> y no va a la segundo <<optionscreatelessons(ourData.less);>>
Aquí está mi código si hay algún experto en JS... Por favor, ayuda.
<script type="text/javascript"> var ourRequest = new XMLHttpRequest(); //New request object ourRequest.open("get", "test.php",encoding="utf-8-sig", true); ourRequest.onload = function() { if (this.readyState == 4 && this.status == 200) { var x = ourRequest.responseText; let ourData = JSON.parse(x); let j = 0; let l = 0; while (j <= ourData.auth.length) { console.log(ourData.auth[j]); j++; } while (l <= ourData.less.length) { console.log(ourData.less[l]); l++; } // This prints anything Ok at console, like JSON Objects optionscreateauthors(ourData.auth); optionscreatelessons(ourData.less); } } ourRequest.send(); function optionscreateauthors(data) { var authors = document.getElementById("authors"); for (i = 0; i<= data.length; i++) { opta = document.createElement("option"); opta.value = data[i].id; // Here Stop if i comment this opta.text = data[i].fullname; //Stop Here authors.add(opta); } } function optionscreatelessons(data) { var authors = document.getElementById("lessons"); for (i = 0; i<= data.length; i++) { optl = document.createElement("option"); optl.value = data[i].lessonid;// Also Stop Here optl.text = data[i].lessonname;//And Here... authors.add(optl); } } </script>Tiene un buen comienzo aquí, así que le ofrecí algunos consejos que creo que lo ayudarán a descubrir dónde está atascado.
La otra cosa que puede probar si usa los bucles for in es el siguiente patrón simple para detener esos errores de tipo no detectados:
opta.value = (data[i] && data[i].id) ? data[i].id : 'no data';El patrón es el siguiente:
let varName = (boolean resolved from otherVariable) ? otherVariable : 'default value';Recomendaría hacer los cambios a continuación y usar el patrón anterior con algo mejor que 'sin datos' como valor predeterminado.
<script type="text/javascript"> var ourRequest = new XMLHttpRequest(); //New request object ourRequest.open("get", "test.php",encoding="utf-8-sig", true); ourRequest.onload = function() { if (this.readyState == 4 && this.status == 200) { var x = ourRequest.responseText; let ourData = JSON.parse(x); let j = 0; let l = 0; while(j <= ourData.auth.length){console.log(ourData.auth[j]); j++;} while(l <= ourData.less.length){console.log(ourData.less[l]); l++;} //This print anything Ok at console,like JSON Objects optionscreateauthors(ourData.auth); optionscreatelessons(ourData.less); }} ourRequest.send(); function optionscreateauthors(data) {/**Coloque un archivo console.log (datos) aquí y busque los datos de opciones que faltan.
**/ var authors = document.getElementById("authors"); for (i = 0; i<= data.length; i++) {/**Yo usaría un bucle for (i en datos) aquí
**/ opta = document.createElement("option");/**tiene que usar bucles anidados para (ingresar datos [i])
**/ opta.value = data[i].id;// Here Stop if i comment this opta.text = data[i].fullname;//Stop Here authors.add(opta); }} function optionscreatelessons(data) { var authors = document.getElementById("lessons"); for (i = 0; i<= data.length; i++) { optl = document.createElement("option"); optl.value = data[i].lessonid;// Also Stop Here optl.text = data[i].lessonname;//And Here... authors.add(optl); } } </script>