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 '

Arun P Johny · Accepted Answer · 2014-03-11 08:18:02Z

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

edited Mar 11, 2014 at 8:18

answered Mar 11, 2014 at 8:04

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

Sush Over a year ago

No same error is getting while selecting second os getting` data.VMs[i].ADAPTER[i] is undefined `

Sush Over a year ago

Now getting with this code......

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

getting` data.VMs[i].ADAPTER[i] is undefined `

Arun P Johny Over a year ago

@Sush data.VMs[i].ADAPTER[i].names is again wrong.. it should be vm.ADAPTER[0].name - should not use i again and the key is name not names

Collectives™ on Stack Overflow

displaying values from json to dropdown list

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related