Question 290891 in Javascript Question posted in
A very good W3school tutorial can be found here.

populate a SELECT Dropdown List with JSON Data using JavaScript

I want to populate a SELECT Dropdown List with JSON Data using JavaScript
i have sample data

sampledata  =  [{ "Districtname": "CENTRAL DELHI", "ID": 1 }, { "Districtname": "NORTH DELHI", "ID": 2 }, { "Districtname": "NORTH EAST DELHI", "ID": 3 }, { "Districtname": "NORTH WEST DELHI", "ID": 4 }, { "Districtname": "SOUTH DELHI", "ID": 5 }, { "Districtname": "SOUTH EAST DELHI", "ID": 6 }, { "Districtname": "SOUTH WEST DELHI", "ID": 7 }, { "Districtname": "WEST DELHI", "ID": 8 }]

success: function(data) {
    var distList = data.d;
    console.log(distList);
    //consoleoutput =  [{ "Districtname": "CENTRAL DELHI", "ID": 1 }, { "Districtname": "NORTH DELHI", "ID": 2 }, { "Districtname": "NORTH EAST DELHI", "ID": 3 }, { "Districtname": "NORTH WEST DELHI", "ID": 4 }, { "Districtname": "SOUTH DELHI", "ID": 5 }, { "Districtname": "SOUTH EAST DELHI", "ID": 6 }, { "Districtname": "SOUTH WEST DELHI", "ID": 7 }, { "Districtname": "WEST DELHI", "ID": 8 }]
    var s = '<option value="-1">Please Select a Distic</option>';
    for (var i = 0; i < distList.length; i++) {
        s += '<option value="' + distList[i].ID + '">' + distList[i].Districtname + '</option>';
    }
    $("#dist").html(s);

}

i tried another approach

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

but

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"Districtname":"CENTRAL.................... ,{"Districtname":"WEST DELHI","ID":8}]

plz help

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    thanks everyone this code work for me

    let distList = JSON.parse(data.d);               
                                
                //method 1

               var s = '<option value="-1">Please Select a District</option>';
               for (var i = 0; i < distList.length; i++) {
                    s += '<option value="' + distList[i].ID + '">' + distList[i].Districtname + '</option>';
                }
                $("#dist").html(s);


                //method 2

                $("#dist").html("");
                $.each(distList, function (key, value) {
                    $('#dist').append('<option>' + distList[key].Districtname + '</option>');                      
                });

  2. 0

    In your code The in operator only works on objects. You are using it on a string. Make sure your value is an object before you using $.each. In this specific case, you have to parse the JSON:

     $.each(JSON.parse(sampledata ), ...)

    Furthermore, there is an easier way to populate data on HTML select using javascript.

    Have a look on below code :

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select Control Population</title>
</head>
<body>

  <label for="districtSelect">Select District:</label>
  <select id="districtSelect"></select>

  <script>
    // Your data
    const districts = [
      { "Districtname": "CENTRAL DELHI", "ID": 1 },
      { "Districtname": "NORTH DELHI", "ID": 2 },
      { "Districtname": "NORTH EAST DELHI", "ID": 3 },
      { "Districtname": "NORTH WEST DELHI", "ID": 4 },
      { "Districtname": "SOUTH DELHI", "ID": 5 },
      { "Districtname": "SOUTH EAST DELHI", "ID": 6 },
      { "Districtname": "SOUTH WEST DELHI", "ID": 7 },
      { "Districtname": "WEST DELHI", "ID": 8 }
    ];

    // Get the select element
    const selectElement = document.getElementById("districtSelect");

    // Iterate over the data and create option elements
    districts.forEach(district => {
      const optionElement = document.createElement("option");
      optionElement.value = district.ID;
      optionElement.textContent = district.Districtname;
      selectElement.appendChild(optionElement);
    });
  </script>

</body>
</html>
    Login or Signup to reply.
  3. 0 
    sampledata  =  [{ "Districtname": "CENTRAL DELHI", "ID": 1 }, { "Districtname": "NORTH DELHI", "ID": 2 }, { "Districtname": "NORTH EAST DELHI", "ID": 3 }, { "Districtname": "NORTH WEST DELHI", "ID": 4 }, { "Districtname": "SOUTH DELHI", "ID": 5 }, { "Districtname": "SOUTH EAST DELHI", "ID": 6 }, { "Districtname": "SOUTH WEST DELHI", "ID": 7 }, { "Districtname": "WEST DELHI", "ID": 8 }]

//Instead of:

/*
    var s = '<option value="-1">Please Select a Distic</option>';
    for (var i = 0; i < sampledata.length; i++) {
        s += '<option value="' + sampledata[i].ID + '">' + sampledata[i].Districtname + '</option>';
    }
   $('#dist').html(s);
   
*/


  // Default option at select could be 
  // place inside the select of static html.

  // To iterate "JSON" known as Object inside JS
  // Try to use for(let district of sampledata)
  const $selectElement = document.querySelector('#dist');
  for(let district of sampledata){
   //New HTMLOptionElement
   let $option = document.createElement('option');
   $option.value = district.ID;
   $option.innerText = district.Districtname;
   //Add option
   $selectElement.appendChild($option);
  }
    select {
 width: 300px;
 padding: 15px;
}
    <select name="districts" id="dist">
 <!-- loaded by js -->
  <option value="-1">Please Select a District</option>
</select>

    References:
    For..of
    Template literals

    Login or Signup to reply.
  4. 0

    This works for me –

    //JQuery
$.getJSON(url, function (data) {
  $.each(data, function (index, value) {
    // APPEND OR INSERT DATA TO SELECT ELEMENT.
    $(control).append('<option value="' + value.ID + '">' + value.Districtname + '</option>');
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search