2013-06-11 2 views
1

다음 JSON 개체가 있으므로 드롭 다운을 채우기 위해 값을 사용하고 싶습니다. 나는 이것을 2 일 동안 작동 시키려고 노력하고 있었고 내 컴퓨터를 창밖으로 던질 준비가되었습니다. 누군가 나를 도울 수 있습니까?! jQuery를 사용하여 JSON 데이터에서 쉼표로 구분 된 값 추출

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

가 궁극적으로 나는 이런 식으로 뭔가를 찾고 있어요

여기에 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과 자바 스크립트 ...

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

내 고통을 끝내실 수 있습니까?

감사합니다.

답변

1

가 이상적으로 당신은 JSON 포맷 수를 데이터 값 및 해당 텍스트가 두 개의 별도의 배열에 대신 그룹화되도록 배열에 동일한 인덱스가있는 한 배열을 반복하면 하나를 반복하고 다른 인덱스에 해당하는 인덱스를 얻을 수 있습니다.

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

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

+0

야, 난 내가 지금 세계를 n이 당신에게 모든 사랑을 보낸다! 너 락! 정말 고마워 – bencarter78

0

둘 다 속성을 가리키며 배열 데이터를 볼 수있는 것이 인덱스와 일치합니다. 그래서 종류의 무언가가 충분해야한다 :

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

이 시도

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/