Function not working if it have parameter

Question

After requesting a json data i run it through function like this

request.onload = function() {
 var mainData = request.response;
 loadNavbar(mainData);
}
function loadNavbar(jsonObj) {
	length = jsonObj.catagories.length;
	for (var i = 0 ; i < length; i++) {
	list = document.createElement("li");
	span = document.createElement("span");
	itemName = mainData.catagories[i].catName;
	span.innerHTML = itemName;
	list.appendChild(span);
	nav.appendChild(list);
	console.log(i)
	}
}

the webpage return error like this:

main.js:21 Uncaught TypeError: Cannot read property 'length' of undefined
 at loadNavbar (main.js:21)
 at XMLHttpRequest.request.onload (main.js:12)

But after i change it to this :

request.onload = function() {
 var mainData = request.response;
 loadNavbar();
}
function loadNavbar() {
	length = mainData.catagories.length;
	for (var i = 0 ; i < length; i++) {
	list = document.createElement("li");
	span = document.createElement("span");
	itemName = mainData.catagories[i].catName;
	span.innerHTML = itemName;
	list.appendChild(span);
	nav.appendChild(list);
	console.log(i)
	}
}

It work accordingly. Can i know what i do wrong in the first snippet?

• Rayon: Could you share mainData as well ?
• Hitesh Kansagara: both code snippet is not working uncaught referenceError:request is not defined
• Lia: may you log the mainDat in onload? in both codes.
• Thomas: There's no way your second piece of code could work that way. Do you have a gobal variable mainData?
• Lia: i think you are wrong the first code may work but there is no way to second code to work.

Answer 1

I'm pretty sure the object you are passing to the function does not contain an array called catagories. I'm suggesting you have a typo there and it is supposed to be called categories instead.

However, more information could be useful. The contents of the mainData object, for example.

• KX Jaw: this is the mainData
• vvartiainen: To me, it looks like you are passing in a JSON array instead of JSON object since the string starts with square bracket [ instead of curly bracket {. Try switching that?