Web关于Jq的ajax异步返回的数据处理问题?报错

请问大神，红色标记的变量goodsObjArr，如果前面加上var，点击button，报错(for循环里)如下：

，也就是button绑定的点击事件。如果把var去掉，则一切正常()。如果把async设成false,还是报错。例外，这两个名字就算不一样也会报错,求解释！

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-text-stroke-width: 0px;
-moz-text-stroke-width: 0px;
-o-text-stroke-width: 0px;
-ms-text-stroke-width: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
body {color: #000;
font-size: 12px;
background: #fff;}

a {
color: #000;
font-size: 12px;
text-decoration: none;
blr:expression(this.onFocus=this.blur());
}
a:hover {
color: #FF5c00;
}
img {
vertical-align: middle;
border: 0;
outline: none;
}
div, p, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, table {
display: block;
width: auto;
height: auto;
}
.outer_con {
float: left;
width: 1151px;
margin: 10px 10px 0 0;
padding: 20px;
border: 1px solid #ccc;
}
ul {
float: left;
width: 1131px;
}
ul:after {
clear: both;
display:block;
height: 0;
content: '';
visibility: hidden;
}
ul li {
float: left;
list-style: none;
width: 377px;
height: auto;
margin-bottom: 20px;
}
ul li a {
display: block;
}
ul li .img {
width: 357px;
height: 357px;
border: 1px solid transparent;
overflow: hidden;
}
ul li .img:hover {
border-color: #FF5c00;
}
ul li .img img:hover {
transform: scale(1.1);
transition-duration: 2s;
}
ul li .title {
font-size: 15px;
line-height: 40px;
text-align: left;
}
ul li span {
padding-top: 2px;
margin-right: 20px;
font-size: 16px;
font-weight: bold;
line-height: 22px;
color: #FF5c00;
}
button {
width: 85px;
line-height: 22px;
text-align: center;
background: #fff;
border: 1px solid #ccc;
outline: none;
cursor: pointer;
}
ul li .add_goods:hover {
border: 1px solid #FF5c00;
box-shadow: 3px 1px 2px #ccc;
}
.save_goods {
float: left;
width: 200px;
}
.save_goods p {
height: 30px;
line-height: 30px;
}
.save_goods p span {
vertical-align: top;
margin: 0 5px;
font-size: 20px;
font-weight: bold;
color: #FF5C00;
}
</style>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<div class="outer_con">
<ul id="goodCon"></ul>
</div>
<div class="save_goods">
<p>购物车里有<span>0</span>件商品</p>
<button onclick="goToCar()">去购物车结算</button>
</div>
<script>
   //存放商品的容器
goodObjArr =[];

//加入到购物车的商品数
var a=0;
function addToCar(goodObj) {
a++;
//更新商品数量
$('.save_goods span').text(a);
//指示是否添加新商品
var counter=0;
//判断是否是相同的商品
for (var i = 0;i<goodObjArr.length;i++) {
if (goodObjArr[i].wareId!= goodObj.wareId) {
counter++;
} else {
goodObjArr[i].buyCount++;
}
}
//更新购物车数量
if(counter==goodObjArr.length) {
goodObj.buyCount=1;
goodObjArr.push(goodObj);
}
//缓存
if(window.sessionStorage){
   sessionStorage.setItem('good', JSON.stringify(goodObjArr));
}
}
//去结算
function goToCar() {
window.location = 'Car.html';
}
    $(function(){ $.ajax({
url:'http://120.27.25.57/data/jd.json',
type: 'get',
async: 'true',
cache: 'false',
timeout: '2',
contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
dateType: 'json',
statusCode: {
404: function () {
alert('page not found');
}
},
success: function (goodsData) {
var html="";
var goodsObjArr = goodsData.value.wareList.wareList;
for (var i = 0; i < goodsObjArr.length; i++) {
html += '<li><a class="img" src=' + goodsObjArr[i].longImgUrl + '></a>'
+ '<a class="title" + goodsObjArr[i].wname + '</a>'
+ '<span>￥' + goodsObjArr[i].jdPrice + '</span>'
+ '<button class="add_goods" onclick="addToCar(goodsObjArr[' + i + '])">加入购物车</button></li>';
}
$('#goodCon').html(html);
},
error: function () {
}
})
   })
</script>
</body>
</html>