jQuery UI 自动完成 - 访问 JSON 中的嵌套对象答案

【问题标题】：jQuery UI Autocomplete - accessing nested objects in JSONjQuery UI 自动完成 - 访问 JSON 中的嵌套对象
【发布时间】：2014-12-04 10:23:13
【问题描述】：

我正在尝试将 jQuery UI 自动完成小部件与我从 API 返回的自定义 JSON 提要一起使用，其格式如下：

    {

    "SearchTerm": "ches",
    "HasDirectCountyHit": false,
    "DirectCountyHitId": null,
    "HasDirectLocationHit": false,
    "DirectLocationHitId": null,
    "Developments": [
        {
            "Id": "45339ae3e55a",
            "Label": "Chestnut Walk, Bilston",
            "Url": "/developments/chestnut-walk-bilston"
        },
        {
            "Id": "4835f52e053a",
            "Label": "Crown Park, Chester",
            "Url": "/developments/crown-park-chester"
        },
        {
            "Id": "757964964cc6",
            "Label": "The Birches, West Timperley",
            "Url": "/developments/the-birches-west-timperley"
        }
    ],
    "Counties": [
        {
            "Id": "7",
            "Label": "Cheshire",
            "Url": "/search?cid=7"
        },
        {
            "Id": "24",
            "Label": "Greater Manchester",
            "Url": "/search?cid=24"
        }
    ],
    "Locations": [
        {
            "Id": "12061",
            "Label": "Cheselbourne, Dorset (DT2 7)",
            "Url": "/search?lid=12061"
        },
        {
            "Id": "12062",
            "Label": "Chesham, Buckinghamshire (HP5 1)",
            "Url": "/search?lid=12062"
        },
        {
            "Id": "12063",
            "Label": "Chesham, Greater Manchester (BL9 6)",
            "Url": "/search?lid=12063"
        },
        {
            "Id": "12064",
            "Label": "Chesham Bois, Buckinghamshire (HP6 5)",
            "Url": "/search?lid=12064"
        },
        {
            "Id": "12065",
            "Label": "Cheshunt, Hertfordshire (EN8 9)",
            "Url": "/search?lid=12065"
        },
        {
            "Id": "12066",
            "Label": "Chesley, Kent (ME9 7)",
            "Url": "/search?lid=12066"
        },
        {
            "Id": "12067",
            "Label": "Cheslyn Hay, Staffordshire (WS6 7)",
            "Url": "/search?lid=12067"
        },
        {
            "Id": "12068",
            "Label": "Chessetts Wood, Warwickshire (B94 6)",
            "Url": "/search?lid=12068"
        },
        {
            "Id": "12069",
            "Label": "Chessington, Kingston upon Thames - Greater London (KT9 2)",
            "Url": "/search?lid=12069"
        },
        {
            "Id": "12070",
            "Label": "Chessmount, Buckinghamshire (HP5 1)",
            "Url": "/search?lid=12070"
        }
    ]

}

我调用的 API 根据我的搜索词返回结果，所以我知道嵌套对象中的所有结果都是匹配的 - 我的问题是如何访问这些对象（'Developments'、'Counties' 和' Locations') 以便自动完成小部件可以获取 'Label' 值？

谢谢，罗宾

【问题讨论】：

我认为你可以遍历属性（开发、县和位置）或使用 $.merge 将所有记录合并到一个，这将创建一个包含所有标签、id 和 url 的全新数组值，然后将其作为源分配给自动完成。
你的问题很好，到目前为止你尝试了什么？

标签： javascript jquery json jquery-ui autocomplete

【解决方案1】：

好的 - 你可以这样做：

//put all the keys you want to pull out of your json in an array
var props = [
    "Locations", "Counties", "Developments"
];
//empty array for your autocomplete
var labels = [];

//loop thru all the properties you care about
$.each(props, function () {
    $.each(source[this], function () {
        //and pull out all the labels and add them to the labels array
        labels.push(this.Label)
    });
});


$("#autocomplete").autocomplete({
    source: labels
});

为了看到这一切，我创建了一个快速小提琴 http://jsfiddle.net/fr5yb3n0/

【讨论】：