how to append a dropdown using the JSON stringify data

Question

i am having the results as following. (id & value)

{"5702":"7am - 10am","5703":"10am - 1pm","5704":"12pm - 3pm","5705":"3pm - 6pm","5706":"6pm - 9pm","5707":"7pm - 10pm","5708":"9pm - 12am","5709":"12am - 7am","5730":"AZRAAR 123"}

This is taken as below.

JSON.stringify(<?php echo $timeWindowJson ?>)

Now i am having this append dummy drop down.

var array = selectedDates.split(",");
      var dynamicTable = "<table id='tbl_dynamic_call_dates'><tr><td>Appointment date</td><td>Client time window</td>";
      $.each(array, function(i) {
         dynamicTable += "<tr><td>" + array[i] + "</td><td>" + "<select><option value='volvo'>7am - 10am</option></select>" + "</td></tr>";
      });
      dynamicTable += "</table>";
      $("#div_outgoing_call_dates_rows").append(dynamicTable);

but i want the dropdown appended to be like this.

<select name="CSSAtapsClient[gender_type_id]" class="long" id="gender_type_id">
<option value="">- - Select Gender - -</option>
<option value="5702">7am - 10am</option>
<option value="5703">10am - 1pm</option>
<option value="5704">12pm - 3pm</option>

...... (till all the values are added from json string)

Shareek Ahamed · Accepted Answer · 2013-09-27 10:00:54Z

3

Wait a minute the string you have provided is not JSON.... you may correct it first...

Sample JSON STRING SHOULD LOOK LIKE THIS

[{"id":"1063","dewr_code":"Unknown Division - ML & Psych"},{"id":"1066","dewr_code":"YorkePDGP - Dale"}]

You may try something like this inside the AJAX call.....

success: function(data) {
            $('#state_id').html('').append('<option value="">- - Select State - -</option>');
            $.each(data, function(i, value) {
               $('#state_id').append('<option value="' + value.id + '">' + value.state + '</option>');
            });
            $('#state_id').trigger('change');
         }

edited Sep 27, 2013 at 10:00

answered Sep 27, 2013 at 9:55

Shareek Ahamed

3781 silver badge13 bronze badges

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

1 Comment

Andy Over a year ago

You don't need to change the structure of the data. It's an object, and each can loop happily through an object.

Ashis Kumar · Accepted Answer · 2013-09-27 10:05:22Z

You can give this a try if your shown data is not a proper json (as it dont look like json),

var array = selectedDates.replace("{","").replace("}","").split(",");
var selectHTML = "<select><option value=''>--Select--</option>";
$.each(array, function(i,value) {
    selectHTML += "<option value='"+value.split("-")[0]+"'>"+value.split("-")[1]+"</option>";
});
selectHTML += "</select>";
var dynamicTable = "<table id='tbl_dynamic_call_dates'><tr><td>Appointment date</td><td>Client time window</td>";
$.each(array, function(i,value) {
 dynamicTable += "<tr><td>" + value.split("-")[0] + "</td><td>" + selectHTML + "</td></tr>";
});
dynamicTable += "</table>";
$("#div_outgoing_call_dates_rows").append(dynamicTable);

This should work for you.

Andy · Accepted Answer · 2013-09-27 10:17:46Z

1

In your HTML:

<select id="gender_type_id">
  <option value="">- - Select Gender - -</option>
</select>

In your Javascript:

$.each(obj, function(key, value) {
  $('#gender_type_id').append('<option value="' + key + '">' + value + '</option>');
});

The thing you're calling an array isn't an array. It's just a JS object with a number of properties. Using each is fine, but you need to pass the key and value through rather than the element and index.

See it working here.

edited Sep 27, 2013 at 10:17

answered Sep 27, 2013 at 10:11

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

how to append a dropdown using the JSON stringify data

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related