Извлечение разделенных запятыми значений из данных JSON с помощью jQuery

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"); 
}); 

Fiddlehttp://jsfiddle.net/DbVUa/