Question

我正在使用ajax从数据源获取数据。开发人员工具向我展示了ajax GET操作正在返回正确的数据，但是我尝试访问要在html页面上显示的数据的尝试无效。你知道为什么吗？

我已经从另一个运行良好的应用程序中复制了代码，因此我以为它可以工作-但在某个地方我犯了一个错误，但看不到哪里。

这是AJAX Get调用返回的JSON代码：

[{"LINKSCATEGORYNAME":"Client Sites (local)","LINKSCATEGORYID":8},
{"LINKSCATEGORYNAME":"CMS (Local)","LINKSCATEGORYID":41},
{"LINKSCATEGORYNAME":"Music Library and Playlists","LINKSCATEGORYID":24},
{"LINKSCATEGORYNAME":"Our Sites (Local)","LINKSCATEGORYID":7},
{"LINKSCATEGORYNAME":"Radio Prep","LINKSCATEGORYID":18},
{"LINKSCATEGORYNAME":"Stats Reports","LINKSCATEGORYID":17}]

这是我的尝试

$.getJSON("linksdaoproxy.cfc?method=getCategoriesForMajorCatID&returnformat=json",{"argsLinksMajorCategoryID":selectedID}, function(res,code) {
          var newoptions = "";
            for(var i=0; i<res.DATA.length; i++) {
                newoptions += "<option value=\"" + res.DATA[i] + "\">" + res.DATA[i] + "</option>";
            $("#LinksCategoryID").children().end().append(newoptions);
        });

控制台中的错误提示：

EditLinkbean.cfm:200 Uncaught TypeError: Cannot read property 'length' of undefined

所引用的行是带有for（var ...函数的那一行。

Answer 1

我假设您的数据在 for(var i=0; i<res.DATA.length; i++)

为null，因此nullpointer表示您无法读取（DATA-undefined）的.length。

（具有误导性！请留出将来的信息） and JSON objects start with {}, not with [].

尝试返回类似{RESULT：[yourarray]}

的内容

Answer 2

我认为您想要这样的东西。

不能访问DATA属性（因为返回时不存在该属性（它甚至不存在，因为它是一个数组）。

$.getJSON("linksdaoproxy.cfc?method=getCategoriesForMajorCatID&returnformat=json",{"argsLinksMajorCategoryID":selectedID}, function(res,code) {
    var newoptions = "";
    for(var i=0; i<res.length; i++) {
        newoptions += "<option value=\"" + res[i].LINKSCATEGORYID + "\">" + res[i].LINKSCATEGORYNAME + "</option>";
    }
    $("#LinksCategoryID").children().end().append(newoptions);
});

Answer 3

这里有几个问题：

从AJAX请求返回的JSON中没有DATA属性，您可以直接访问res。
您需要在循环中检索对象的属性，即。 LINKSCATEGORYNAME和LINKSCATEGORYID并将它们连接到您创建的HTML字符串，而不是对象本身。
您的for循环不需要结束)
append()调用需要超出循环范围。

话虽如此，请尝试以下操作：

var res = [{
  "LINKSCATEGORYNAME": "Client Sites (local)",
  "LINKSCATEGORYID": 8
}, {
  "LINKSCATEGORYNAME": "CMS (Local)",
  "LINKSCATEGORYID": 41
}, {
  "LINKSCATEGORYNAME": "Music Library and Playlists",
  "LINKSCATEGORYID": 24
}, {
  "LINKSCATEGORYNAME": "Our Sites (Local)",
  "LINKSCATEGORYID": 7
}, {
  "LINKSCATEGORYNAME": "Radio Prep",
  "LINKSCATEGORYID": 18
}, {
  "LINKSCATEGORYNAME": "Stats Reports",
  "LINKSCATEGORYID": 17
}]

//$.getJSON("linksdaoproxy.cfc?method=getCategoriesForMajorCatID&returnformat=json", { "argsLinksMajorCategoryID": selectedID }, function(res, code) {
  var newoptions = "";
  for (var i = 0; i < res.length; i++) {
    newoptions += '<option value="' + res[i].LINKSCATEGORYID + '">' + res[i].LINKSCATEGORYNAME + '</option>';
  }
  $("#LinksCategoryID").append(newoptions);
//});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="LinksCategoryID"></select>

还请注意，您可以使用map()和模板文字来使回调中的逻辑更加简洁。但是，IE不支持后者。

var newoptions = res.map(function(obj) {
  return `<option value="${obj.LINKSCATEGORYID }">${obj.LINKSCATEGORYNAME}</option>`;
});
$("#LinksCategoryID").append(newoptions);

如何访问从AJAX查询返回的JSON元素

3 个答案: