CODEWITHSUNDEEP
javascriptjson
Ryan NZ
Ryan NZ

Reputation: 626

Populate a Dropdown Menu with JSON Data

Attempting to populate a drop down menu with JSON data but cant quite figure out what I am doing wrong.

JSON Data

{"dropdownValue1":"1x1","dropdownDisplay1":"1x1","dropdownValue2":"1x2","dropdownDisplay2":"1x2","dropdownValue3":"1x3","dropdownDisplay3":"1x3","dropdownValue4":"1x4","dropdownDisplay4":"1x4","dropdownValue5":"1x5","dropdownDisplay5":"1x5","dropdownValue6":"1x6","dropdownDisplay6":"1x6"}

Java/HTML

<script type="application/javascript">
 $(function(){
        $("select#size").change(function(){
          $.getJSON("getDropdown",{id: $(this).val(), ajax: 'true'}, function(j){
            var options = '';
            for (var i = 0; i < j.length; i++) {
              options += '<option value="' + i + '">' + j[i] + '</option>';
        }
            $("select#size").append(options);
            })
        })
    })  </script>  

    <div class="input select orderBoxContent">
        <select name="size" id="size">
        </select>
        </div>

Actual JSON request

function getDropdown()
{
var people_no = $('#howmanypeople').val();
$.getJSON("../../getdata.php?getDropdown=yes&people_no="+people_no, function(response) {
        $('#getDropdown').html(response.getDropdown);
    });
}

Cheers

Ryan

Upvotes: 0

Views: 309

Answers (2)

Ryan NZ
Ryan NZ

Reputation: 626

 $(function(){
        $("select#size").change(function(){
          $.getJSON("getDropdown",{id: $(this).val(), ajax: 'true'}, function(j){
            var i;
            for (i in j) {
              if (j.hasOwnProperty(i)) {
                // i = 'dropdownValue1'
                // j[i] = "1x1"
                // but the order is unknown
                options += '<option value="' + j[i] + '">' + j[i] + '</option>';
              }
            }
            $("select#size").append(options);
            })
        })
    })

Upvotes: 0

phylax
phylax

Reputation: 2086

Your JSON is an object but you are itterating it like an array.

var i;
for (i in j) {
  if (j.hasOwnProperty(i)) {
    // i = 'dropdownValue1'
    // j[i] = "1x1"
    // but the order is unknown
    options += '<option value="' + j[i] + '">' + j[i] + '</option>';
  }
}

Upvotes: 2

Related Questions