如何解析返回的 JSON 数组以填充 JQuery UI 自动完成答案

【问题标题】：How to parse returned JSON array to populate JQueryUI Automcomplete如何解析返回的 JSON 数组以填充 JQuery UI 自动完成
【发布时间】：2014-10-21 18:41:40
【问题描述】：

这是我的 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) { 永远不会被执行。
我应该怎么做才能完成这项工作？

【问题讨论】：

如果data是你上面给出的JSON，那么就没有data.d吧？
是的。 Data.d 什么都不是
那是你的问题，不是吗？不应该只是$.map(data, function...
@1110 那你为什么要迭代 nothing 并期望发生一些事情..？
@PatrickQ 但如果我在里面传递data 我会得到错误：Uncaught TypeError: Cannot use 'in' operator to search for '180' in [{"ItemId":1095,"ItemName":"Double Axe"},{"ItemId":1095,"ItemName":"Helm"},{"ItemId":1095,"ItemName":"Armor"},{"ItemId":1095,"ItemName":"Gloves"},{"ItemId":1095,"ItemName":"Boots"}]

标签： javascript jquery json jquery-ui jquery-autocomplete

【解决方案1】：

您当前正在将 json string 传递给需要数组或对象的 $.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>

【讨论】：