如何解析返回的JSON数组以填充JQueryUI Automcomplete

Question

这是我的jquery ajax调用的成功部分：

dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        console.log(data);
                        response($.map(data.d, function (item) {                            
                            return {                                
                                label: item.ItemName,
                                val: item.ItemId
                            }
                        }))
                    },

这是我从服务器获得的成功块中的data

[{"ItemId":1095,"ItemName":"Double Axe"},{"ItemId":1096,"ItemName":"Helm"},{"ItemId":1097,"ItemName":"Armor"},{"ItemId":1098,"ItemName":"Gloves"},{"ItemId":1099,"ItemName":"Boots"}]

我得到的错误是：

Uncaught TypeError: Cannot read property 'length' of undefined

问题是response($.map(data.d, function (item) {从未被执行
我该怎么做才能让它发挥作用？

Answer 1

您当前正在将json字符串传递给$.map()方法，该方法需要一个数组或对象。使用JSON.parse()解析您得到的响应。

以下似乎运行良好：

var data = [{
  "ItemId": 1095,
  "ItemName": "Double Axe"
}, {
  "ItemId": 1096,
  "ItemName": "Helm"
}, {
  "ItemId": 1097,
  "ItemName": "Armor"
}, {
  "ItemId": 1098,
  "ItemName": "Gloves"
}, {
  "ItemId": 1099,
  "ItemName": "Boots"
}];
$("#tags").autocomplete({
  "source": function(request, response) {
    response($.map(data, function(item) {
      return {
        label: item.ItemName,
        val: item.ItemId
      }
    }));
  }
});

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="tags">Tags:</label>
  <input id="tags" />
</div>