displaying values from json to dropdown list

Question

I have a josn data like this

{
  "VMs":[
    {
      "ID":"VM-WIN7-32",
      "OS":"Windows 7-32",
      "ADAPTER":[{"ID":"adap01", "name":"Linksys Wireless-G USB Network Adapter", "paths":"D:\\VirtualMachines\\Win7_X86_VM-001\\Win7_X86_VM-001.vmx","SNAPSHOT":"Wi-Fi-Test"}],
      "DUIConfig":[{"ID":"dui01", "name":"DGI","description":"dui description"}]    

    }, {
      "ID":"VM-WIN764",
      "OS":"Windows 7-64",
      "ADAPTER":[{"ID":"adap02", "name":"222Linksys Wireless-G USB Network Adapter", "paths":"E:\\VirtualMachines\\Win7_X86_VM-001\\Win7_X86_VM-001.vmx","SNAPSHOT":"Wi-Fi-Test"}],
      "DUIConfig":[{"ID":"dui02", "name":"2ddDGI","description":"2 dui description"}]   

    }
  ]

}

I have 3 dropdown lists .while selecting operating system "Windows 7-32" corresponding adapter name and DUIConfig name should be load in the corresponding dropdon lists, Am using following code.it is working while selecting first os and not working while selecting second os from the drop down list getting error

TypeError: data.VMs[i].ADAPTER[i] is undefined


...option value="' + data.VMs[i].ADAPTER[i].ID + '">' + data.VMs[i].ADAPTER[i].names.

code

$("#ops").change(function () {
    var adapter = "", dui="";
    var selected = $(this).val();
    $.getJSON('/json/data.json', function (data) {
      $.each(data.VMs, function (i) {
        if (data.VMs[i].ID === selected) {

          adapter += '<option value="' + data.VMs[i].ADAPTER[i].ID + '">' + data.VMs[i].ADAPTER[i].names + '</option>';  
          dui += '<option value="' + data.VMs[i].DUIConfig[i].ID + '">' + data.VMs[i].DUIConfig[i].names + '</option>';

        }
      });

      $('#adapter').html(adapter);
    $('#dui').html(dui);
    });
  });

  $.getJSON('/json/data.json', function (data) {
    var os = '<option value="">SELECT </option>';
    var adapter = '<option value="">SELECT </option>';
    $.each(data.VMs, function (i) {
      os += '<option value="' + data.VMs[i].ID + '">' + data.VMs[i].OS + '</option>';

      adapter += '<option value="' + data.VMs[i].ADAPTER[i].ID + '">' + data.VMs[i].ADAPTER[i].names + '</option>';
    });
    $('#ops').html(os);
    $('#adapter').html(adapter);
  });
}

htmlcode

 <tr>
            <td width="200px">
              Operating Systems : 
            </td>
            <td colspan="2">
              <select id="ops" class="longcombo">
              </select>
            </td>
          </tr>

          <tr>
            <td width="200px">
             Adapter :
            </td>
            <td colspan="2">
              <select id="adapter" class="longcombo">
              </select>
            </td>
          </tr>
 <tr>
            <td width="200px">
             DUI Config :
            </td>
            <td colspan="2">
              <select id="dui" class="longcombo">
              </select>
            </td> <td colspan="2" id="showdes">

            </td>
          </tr>

jfidle but this code will load anything....

whats wrong with my code '

Answer 1

You need to use data.VMs[i].ADAPTER[0] because the ADAPTER array has only one value, the same with DUIConfig also

adapter += '<option value="' + data.VMs[i].ADAPTER[0].ID + '">' + data.VMs[i].ADAPTER[0].names + '</option>';  

Also you will get the current object as the second parameter to each handler, so no need to use index inside the each handler

$("#ops").change(function () {
    var adapter = [],
        dui = [];
    var selected = $(this).val();
    $.getJSON('/json/data.json', function (data) {
        //you will get the current VM as the second parameter, so no need to access it using index again
        $.each(data.VMs, function (i, vm) {
            if (vm.ID === selected) {

                adapter.push('<option value="' + vm.ADAPTER[0].ID + '">' + data.VMs[i].ADAPTER[0].names + '</option>');
                dui.push('<option value="' + vm.DUIConfig[0].ID + '">' + data.VMs[i].DUIConfig[0].names + '</option>');

            }
        });

        $('#adapter').html(adapter.join(''));
        $('#dui').html(dui.join(''));
    });
});

Demo: Fiddle