带参数函数无法运行，请求JSON后调用函数网页报错求助

我来帮你梳理下代码里的问题，这几个点应该就是导致报错的核心原因：

1. 变量作用域错误 #

你在request.onload里定义的mainData是局部变量，在loadNavbar函数里根本访问不到。好在你已经把mainData作为参数传给了loadNavbar，所以函数内部应该用参数jsonObj来访问数据，而不是直接用mainData。

2. 未声明的变量 #

length、list、span、itemName这些变量都没有用let/const/var声明，会自动变成全局变量，不仅容易引发意外的变量污染，也不符合JS编码规范。

3. 拼写错误 #

catagories应该是categories（注意中间的字母'e'），这个拼写错误会直接导致无法访问分类数组，抛出undefined相关的报错。

4. JSON未解析问题 #

request.response返回的通常是字符串格式的JSON，你需要先用JSON.parse()把它转换成JavaScript对象，不然jsonObj会是字符串，访问jsonObj.categories必然报错。

修正后的完整代码 #

request.onload = function() { 
  // 先把JSON字符串解析为JS对象
  const mainData = JSON.parse(request.response); 
  loadNavbar(mainData); 
} 

function loadNavbar(jsonObj) { 
  // 声明变量+修正拼写错误
  const length = jsonObj.categories.length; 
  for (let i = 0 ; i < length; i++) { 
    const list = document.createElement("li"); 
    const span = document.createElement("span"); 
    // 使用函数参数jsonObj访问数据
    const itemName = jsonObj.categories[i].catName; 
    span.innerHTML = itemName; 
    list.appendChild(span); 
    nav.appendChild(list); 
    console.log(i); 
  } 
}

另外还要确认nav变量已经正确获取到页面上的导航元素（比如提前执行const nav = document.getElementById('你的导航栏ID')），不然nav.appendChild也会抛出找不到元素的错误。

内容的提问来源于stack exchange，提问作者KX Jaw