How to print JSON String object as a dropdown in javascript

Question

I am getting jsonString object in my ajax call.can any one tell me how to print this object as a dropdown .

[
  {
    "id" : 3272,
    "name" : "a"
  },
  {
    "id" : 3255,
    "name" : "b"
  },
  {
    "id"
     : 3257,
    "name" : "c"
  },
  {
    "id" : 3253,
    "name" : "d"
  },
  {
    "id" : 3256,
    "name" : "e"
  }
]

That's my code:

<script>
  $(document).ready(function() {
    $("#customerDetails").change(function() {
      var value = $('#customerDetails :selected').text();
      $.ajax({
        type: 'GET',
        url: 'environments',
        data: {
          selectedcustomername: value
        },
        success: function(result) { //this result is my jsonstring object alert("success"); 
        }
      });
    });
  });
</script>

Please show us what you have tried so far, and why that is not doing what you expect. — Adriaan Koster, Nov 20 '15 at 09:50
Possible duplicate of [jquery fill dropdown with json data](http://stackoverflow.com/questions/5952284/jquery-fill-dropdown-with-json-data) — nafas, Nov 20 '15 at 09:52

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

Let say myJson is

{
    "myJson": [
        {
            "id": 3272,
            "name": "a"
        },
        {
            "id": 3255,
            "name": "b"
        },
        {
            "id": 3257,
            "name": "c"
        },
        {
            "id": 3253,
            "name": "d"
        },
        {
            "id": 3256,
            "name": "e"
        }
    ]
}

var options = eval(myJson);

Using jQuery to fill options

var length = options.length;

for(var j = 0; j < length; j++)
{
    var newOption = $('<option/>');
    newOption.attr('text', options[j].name);
    newOption.attr('value', options[j].id);
    $('#mySelect').append(newOption);
}

Also have a look here

edited May 23 '17 at 12:15

Community

1
1

answered Nov 20 '15 at 09:55

Ankur Singhal

26,012
16
82
116

i am getting this jsonstring from backend.this object having dynamic data.is there any way to display my jsonstring as a dropdown – mvswetha Nov 20 '15 at 09:59
@mvswetha Post complete code, how you are hitting the server, and getting response – Ankur Singhal Nov 20 '15 at 10:00
– mvswetha Nov 20 '15 at 10:03
@RequestMapping(value = "/environments", method = RequestMethod.GET) public @ResponseBody String getEnvironmentNames(@RequestParam String selectedcustomername) throws SQLException { ModelAndView modelAndView = new ModelAndView(); modelAndView.addObject("environments", new Environments()); List environmentnamesList= loginDelegate.getEnvironments(selectedcustomername); Gson gson = new Gson(); System.out.println("gson"+gson); String jsonString = gson.toJson(environmentnamesList); return jsonString; } – mvswetha Nov 20 '15 at 10:03
@mvswetha pls post on the question itself, it is becoming messy – Ankur Singhal Nov 20 '15 at 10:04

score 0 · Answer 2 · answered Nov 20 '15 at 09:58

0

var row=[{"id":3272,"name":"a"},{"id":3255,"name":"b"},{"id"
:3257,"name":"c"},{"id":3253,"name":"d"
},{"id":3256,"name":"e"}];
var select="<select id='x'>";
for(var i=0,l=row.length;i<l;i++){
  var item=row[i];
  select+="<option value='"+item.id+"'>"+item.name+"</option>";
} 
select+="</select>";

document.write(select);

answered Nov 20 '15 at 09:58

chsword

2,032
17
24

what is l .for(var i=0,l=row.length;i – mvswetha Nov 20 '15 at 10:24
it as the same as for(var i=0;i"+item.name+""; } – chsword Nov 20 '15 at 10:25

score 0 · Answer 3 · answered Nov 20 '15 at 09:59

By using simple for loop you can read each value and make a select box

var v =  { "myJson": [ { "id": 3272, "name": "a" }, { "id": 3255, "name": "b" }, { "id": 3257, "name": "c" }, { "id": 3253, "name": "d" }, { "id": 3256, "name": "e" } ] }
 // in your ajax success block write this and v is your response return by ajax 
var str ='<select>';
for(var i=0;i<v.myJson.length;i++){
str += '<option value="'+v.myJson[i].id+'">'+v.myJson[i].name+'</option>';
}
str +='</select>';
$("body").html(str)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body></body>

score 0 · Answer 4 · answered Nov 20 '15 at 09:59

Here's a working fiddle: https://jsfiddle.net/q1ekcf6z/

var returnData = [{"id":3272,"name":"a"},{"id":3255,"name":"b"},{"id"
:3257,"name":"c"},{"id":3253,"name":"d"
},{"id":3256,"name":"e"}];


var options = '';

returnData.forEach(function(data){
    options+= getOption(data.name);
});

var fullDropdown = '<select>' + options + '</select>';

document.write(fullDropdown);

function getOption(textTo){
 return '<option>' + textTo + '</option>';   
}

How to print JSON String object as a dropdown in javascript

4 Answers4