Question

我有以下JSON对象，我想使用这些值来填充下拉列表。我一直试图让它工作2天，并准备把我的电脑扔出窗外。有人可以帮帮我吗？！

这是JSON对象......

{
"query":"de mar",
"suggestions":[
    "Any Location",
    "Camp De Mar, Majorca, SPAIN",
    "L'amettla De Mar, Costa Dorada, SPAIN",
    "Lloret De Mar, Costa Brava, SPAIN",
    "Malgrat De Mar, Costa Brava, SPAIN",
    "Pineda De Mar, Costa Brava, SPAIN",
    "Roquetas De Mar, Costa De Almeria, SPAIN",
    "Tossa De Mar, Costa Brava, SPAIN"
],
"data":[
    "",
    "DestinationResort|Camp De Mar",
    "DestinationResort|L'Amettla De Mar",
    "DestinationResort|Lloret De Mar",
    "DestinationResort|Malgrat De Mar",
    "DestinationResort|Pineda De Mar",
    "DestinationResort|Roquetas De Mar",
    "DestinationResort|Tossa De Mar"
]
}

我的HTML和javascript ......

<input type="text" id="search" data-provide="typeahead">

<select name="destinations" id="destinations"></select>

$("#search").on("input", function() {
$.getJSON( "http://holidays.allinclusive.co.uk/external/destinations.ashx?query=" + $("#search").val() )
.done(function(data) {
$.each(data, function() {
  $.each(this, function(name, value) {
    $( '<option value="' + data.value +'">' + value + '</option>' ).appendTo( "#destinations" );
  })
})
})
});

最终我正在寻找类似的东西......

<option value="DestinationResort|Camp De Mar">Camp De Mar, Majorca, SPAIN</option>

有人可以结束我的痛苦吗？

由于

Answer 1

理想情况下，您可以重新格式化JSON，以便将数据值和相应的文本组合在一起而不是分成两个单独的数组，但只要数组保证具有相同的索引，您就可以循环遍历一个并获取相应的索引为了另一个。

$.each(data.suggestions, function (idx, elem) {
    $("select").append(
        $("<option>").val(data.data[idx]).text(elem)
    );
});

http://jsfiddle.net/ExplosionPIlls/BwxtR/

Answer 2

两个属性都指向数组，从我可以看到，您的数组数据与索引匹配。所以某种东西应该足够了：

var option = '<option value="' + data.data[index] + '">" + data.suggestions[index] + "</option>";

拿你的代码：

$("#search").on("input", function() {
    $.getJSON( "http://holidays.allinclusive.co.uk/external/destinations.ashx?query=" + $("#search").val() )
        .done(function(data) {
            for (var index = 0; index < data.data.length; index++) {
                var option = '<option value="' + data.data[index] + '">" + data.suggestions[index] + "</option>";
            }
        })
    });
});

Answer 3

试试这个，

var json={"query":"de mar","suggestions":[    "Any Location",    "Camp De Mar, Majorca, SPAIN",    "L'amettla De Mar, Costa Dorada, SPAIN",    "Lloret De Mar, Costa Brava, SPAIN",    "Malgrat De Mar, Costa Brava, SPAIN",    "Pineda De Mar, Costa Brava, SPAIN",    "Roquetas De Mar, Costa De Almeria, SPAIN",    "Tossa De Mar, Costa Brava, SPAIN"],"data":[    "",    "DestinationResort|Camp De Mar",    "DestinationResort|L'Amettla De Mar",    "DestinationResort|Lloret De Mar",    "DestinationResort|Malgrat De Mar",    "DestinationResort|Pineda De Mar",    "DestinationResort|Roquetas De Mar",   "DestinationResort|Tossa De Mar"]};


$.each(json.suggestions, function(index,value) {
    $( '<option value="'+json.data[index]+'">'+value+'</option>').appendTo("#destinations" );
});

小提琴 http://jsfiddle.net/DbVUa/

使用jQuery从JSON数据中提取逗号分隔值

3 个答案: