jQuery自动完成成功JSON映射

Question

我对 jquery UI 自动完成插件有疑问。我不知道如何映射我从服务器返回的响应。

这是 JSON 结构：

{
    categories: [
       {
          slug: "car-index",
          name: "Car",
          rank: "5"
       },
       {
          slug: "anim-index",
          name: "Animals",
          rank: "29"
       },
    ],
    queries: [
        "term1",
        "term2"
    ]
}

我的自动完成代码：

$.ajax({
        url: autocompleteUrl,
        dataType: 'json',
        data: {
                q: request.term
        },
        success: function(data) {
            response(
                $j.map( data, function(item) {
                    return {
                        name: item.categories.name,
                        slug: item.categories.slug,
                        rank: item.categories.rank,
                        query: item.queries
                    }
                 })
            );

此代码出错。如果我在 data.categories 上执行 map，我可以让它工作，但我还需要来自“查询”的信息我不知道如何从这两个地方返回结果。需要获取所有信息（查询、名称、slug、等级）才能在我的渲染函数中显示文本。

    }).data('uiAutocomplete')._renderItem = function (ul, item) {
    return $('<li></li>')
    .append('<a><span>' + item.name + '</span> - <span>Rank: ' + item.rank + '</span></a>')
    .data('ui-autocomplete-item', item)
    .appendTo(ul);

};

我真的卡在那里，有人可以帮忙吗？

谢谢

Answer 1

可以使用name.value 表示法访问以 JSON 格式返回的数据中的对象。例如，要访问将返回一个数组的属性categories，我们可以简单地调用data.categories。要遍历返回的数组中的项目，我们可以使用$.each()。

另外，我建议您不要依赖 jqXHR.success，而应该链接一个延迟对象并在 AJAX 调用之后使用 .done() :)

$.ajax({
    url: autocompleteUrl,
    dataType: 'json',
    data: {
            q: request.term
    }
}).done(function(data) {
    // Success function
    // Example of iterating through all elements in the array returned by data.categories
    $.each(data.categories, function() {
        $('<li />')
        .html('<a><span>' + this.name + '</span> - <span>Rank: ' + this.rank + '</span></a>')
        .data('ui-autocomplete-item', item)
        .appendTo('ul');
    });
});

您对返回的数据实际想要做什么以及它们应该如何插入 DOM 有点模糊，但我已经做了一个概念验证小提琴，向您展示如何通过 @987654331 进行交互@ 和 data.queries 对象：http://jsfiddle.net/teddyrised/15259aca/