Hello everyone i am exercising with JSON and JS in some DATA Manipulation cause i liked much and want to learn. This time i'm trying to handling some JSON Data from MySql sending JSON and Handling by Javascript. With the received Data i want to create some options using Javascript, until some point i receive and handling everything as it should be, also in my HTML i can create as should the authors options "fullnames" but until there...anything stops there.
At console it strikes Uncaught TypeError: Cannot read properties of undefined (reading 'id or fullname or leesonid or lessonname') and some how stuck in the first function<<optionscreateauthors(ourData.auth);>> and doesn't go to the second <<optionscreatelessons(ourData.less);>>
Here is my Code if there is out there any JS expert...Please Help.
<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>
You have a good start here so I offered some advice that I think will help you figure out where you are stuck.
The other thing you can try if using the for in loops is the following simple pattern to stop those uncaught type errors:
opta.value = (data[i] && data[i].id) ? data[i].id : 'no data';
The pattern is as follows:
let varName = (boolean resolved from otherVariable) ? otherVariable : 'default value';
I would recommend making the changes below and using the pattern above with something better than 'no data' as the default value.
<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) {/**
Put a console.log(data) here and look for your missing option data.
**/
var authors = document.getElementById("authors");
for (i = 0; i<= data.length; i++) {/**
I would use a for (i in data) loop here
**/
opta = document.createElement("option");/**
you have to use nested loops for(key in data[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>