Ajax add option to select for each json array

Question

I need to populate a select item with the values that I get from an ajax call, I return such values as a json array. With the code below, the select is created without any options.

$.ajax({
  type: "GET",
  url: "/wp-content/gta/search_airport.php",
  data: {city: t_city}
}).done(function(resp){
  var sel = $('<select name="airport" id="slt">').appendTo('#pick_type');
  $.each(resp, function() {
$.each(this, function(k, v) {
$('<option>').val(k).text(v).appendTo('#slt');
   });
  });
});

Example json array

[{"name":"Los Angeles","code":"LAX"},{"name":"San Francisco","code":"SFO"}]

I would like the options to be something like <option value="LAX">Los Angeles</option>

nnnnnn · Accepted Answer · 2014-01-06 01:30:30Z

3

You don't needed a nested $.each(). Just loop through the array and directly access the properties of the object at each index:

$.each(resp, function(k, v) {
    $('<option>').val(v.code).text(v.name).appendTo('#slt');
});

On the first iteration, v will be {"name":"Los Angeles","code":"LAX"}, so v.code will be "LAX". On the second iteration, v will be {"name":"San Francisco","code":"SFO"}, so v.code will be "SFO"...

(You may also need to add dataType:"json" to your $.ajax() options - if you don't specify jQuery tries to work it out from the response's MIME type.)

answered Jan 6, 2014 at 1:30

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

enriqg9 Over a year ago

This does the job, thanks.. but then what happens with the k on the function?

nnnnnn Over a year ago

k will be the index of the current item, so on first iteration it will be 0, then second iteration it will be 1. For your particular requirement you don't need to use k for anything within your function, but it does need to be in the function declaration as a placeholder so that v is the second argument. Although now that I think about it you could leave out k and v and use this.code and this.name within the function...

Pranav C Balan · Accepted Answer · 2014-01-06 01:29:26Z

0

Try this,

$.ajax({
    type: "GET",
    url: "/wp-content/gta/search_airport.php",
    data: {city: t_city},
    dataType:"json"
}).done(function(resp) {
    var sel = $('<select name="airport" id="slt">').appendTo('#pick_type');
    $.each(resp, function(key,val) {
        $.each(val, function(k, v) {
            $('<option>').val(k).text(v).appendTo('#slt');
        });
    });
});

answered Jan 6, 2014 at 1:29

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Collectives™ on Stack Overflow

Ajax add option to select for each json array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related