JavaScript Tableau d'objets à une liste déroulante

Question

J'ai un tableau d'objets qui a été récupéré à partir d'un fichier JSON(JSONP) en utilisant jQuery.

Je dois afficher ces données en utilisant une liste déroulante HTML.

Code actuel:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type='text/javascript'> 
    $.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data){ 

    console.log(data); 


    }) 
</script> 

Comment puis-je mettre cette variable data qui est un tableau d'objets à afficher à l'aide déroulante HTML?

tableau d'objets

ressemble à ceci

Object 
lines: Array[10] 
0: Object 
    line: "COLOMBO - BADULLA" 
1: Object 
2: Object 
3: Object 
4: Object 
5: Object 
6: Object 
7: Object 

JSON Fichier

({"lines":[{"line":"COLOMBO - BADULLA"},{"line":"COLOMBO - MATALE"},{"line":"COLOMBO - PUTTLAM"},{"line":"COLOMBO - THANDIKULAM"},{"line":"COLOMBO - TALAIMANNAR"},{"line":"COLOMBO - BATTICALOA"},{"line":"COLOMBO - TRINCOMALEE"},{"line":"COLOMBO - MATARA"},{"line":"COLOMBO - AVISSAWELLA"},{"line":"COLOMBO - MIHINTALE"}]}); 

Answer 1

Cela devrait fonctionner:

$(document).ready(function() { 
    var oDDL = $("<select>"); 
    $.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data) { 
     $.each(data.lines, function(i, item) { 
      oDDL.append('<option>' + item.line + '</option>'); 
     }); 
    }); 
    $("body").append(oDDL); 
}); 

Comme vous pouvez le voir, il est la construction déroulante objet liste et en y ajoutant options pour chaque élément du JSON tableau.

Note: Chaque réponse JSON est différent, le match data.lines et item.line le format JSON de ce cas particulier que.

Answer 2

Vous souhaitez d'abord créer un élément dans votre code html si vous ne l'avez pas:

<select id='myselect'></select> 

Ensuite, dans votre js, supposant que vous avez des propriétés .value y .caption par article que vous feriez:

$.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data){ 
    for(var i=0; i<data.length; i++){ //Traverse the data array 
     var value = data[i].value; 
     var text = data[i].caption; 
     $('<option/>').val(value).text(text).appendTo('#myselect'); 
    }; 
}); 

Juste cela. J'espère que cela t'aides. Bravo