How can I populate a dropdown list in JavaScript with JSON data from a file?

Question

How can I populate a dropdown list in JavaScript with JSON data from a file?

I am experiencing difficulties when it comes to parsing JSON files for use in a dropdown list.

JSON:

{
"BD": "Bangladesh",
"BE": "Belgium",
"BF": "Burkina Faso",
"BG": "Bulgaria",
"BA": "Bosnia and Herzegovina"
}

The goal is to populate the dropdownlist with values as shown below: Example:

<select name="optCountry" id="opt_country">
   <option value="BD">Bangladesh</option>
   <option value="BE">Belgium</option>
   <option value="BF">Burkina Faso</option>
   <option value="BG">Bulgaria</option>
   <option value="BH">Bosnia and Herzegovina</option>
</select>

javascript json drop-down-menu

Answer 1

Answer №1

Explore JSON.parse() to convert a json string to an Object and try using Object.keys() for separating key values into an array. Then, use Array#forEach to iterate through the key values.

var a = '{"BD": "Bangladesh","BE": "Belgium","BF": "Burkina Faso","BG":"Bulgaria","BA": "Bosnia and Herzegovina"}'
var obj = JSON.parse(a);
var select = document.createElement('SELECT')
select.name="optCountry" 
select.id="opt_country"
document.body.appendChild(select)

Object.keys(obj).forEach(function(a){
document.getElementById('opt_country').innerHTML +='<option value="'+a+'">'+obj[a]+'</option>'
})

Answer 2

Explore JSON.parse() to convert a json string to an Object and try using Object.keys() for separating key values into an array. Then, use Array#forEach to iterate through the key values.

var a = '{"BD": "Bangladesh","BE": "Belgium","BF": "Burkina Faso","BG":"Bulgaria","BA": "Bosnia and Herzegovina"}'
var obj = JSON.parse(a);
var select = document.createElement('SELECT')
select.name="optCountry" 
select.id="opt_country"
document.body.appendChild(select)

Object.keys(obj).forEach(function(a){
document.getElementById('opt_country').innerHTML +='<option value="'+a+'">'+obj[a]+'</option>'
})

Answer 3

Answer №2

Here's a suggestion for you to try out: Assuming that your JSON data is stored in a variable called data:

const dropdown = document.getElementById("country_select")
dropdown.innerHTML = "" // Clear the dropdown list
Object.getOwnPropertyNames(data).forEach(function(key){
    dropdown.innerHTML += '<option value="'+key+'">'+data[key]+'</option>'
})

Answer 4

Here's a suggestion for you to try out: Assuming that your JSON data is stored in a variable called data:

const dropdown = document.getElementById("country_select")
dropdown.innerHTML = "" // Clear the dropdown list
Object.getOwnPropertyNames(data).forEach(function(key){
    dropdown.innerHTML += '<option value="'+key+'">'+data[key]+'</option>'
})

Answer 5

Answer №3

Take your JSON data and loop through it using the method Object.prototype.hasOwnProperty(). Create an option group for each item in the JSON and then add it to a select element by updating its innerHTML attribute with the new options.

var json = '{"BD": "Bangladesh","BE": "Belgium","BF": "Burkina Faso","BG":"Bulgaria","BA": "Bosnia and Herzegovina"}';
var data = JSON.parse(json);
var result='';
for (var property in data) {
    if (data.hasOwnProperty(property)) {
result+='<option value="'+property+'">'+data[property]+'</option>';
    }
}
document.getElementById('opt_country').innerHTML=result;

<select name="optCountry" id="opt_country">
</select>

Answer 6

Take your JSON data and loop through it using the method Object.prototype.hasOwnProperty(). Create an option group for each item in the JSON and then add it to a select element by updating its innerHTML attribute with the new options.

var json = '{"BD": "Bangladesh","BE": "Belgium","BF": "Burkina Faso","BG":"Bulgaria","BA": "Bosnia and Herzegovina"}';
var data = JSON.parse(json);
var result='';
for (var property in data) {
    if (data.hasOwnProperty(property)) {
result+='<option value="'+property+'">'+data[property]+'</option>';
    }
}
document.getElementById('opt_country').innerHTML=result;

<select name="optCountry" id="opt_country">
</select>

Answer 7

Answer №4

Give this code a try!

var Country= {
"CA": "Canada",
"AU": "Australia",
"US": "United States",
"NZ": "New Zealand",
"UK": "United Kingdom"
}
var strInnerHTML = "";
$.each(Country, function( index, value ) {
  strInnerHTML +='<option value="'+index+'">'+value+'</option>';
});
 document.getElementById('opt_country').innerHTML = strInnerHTML;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="optCountry" id="opt_country">
</select>

Answer 8

Give this code a try!

var Country= {
"CA": "Canada",
"AU": "Australia",
"US": "United States",
"NZ": "New Zealand",
"UK": "United Kingdom"
}
var strInnerHTML = "";
$.each(Country, function( index, value ) {
  strInnerHTML +='<option value="'+index+'">'+value+'</option>';
});
 document.getElementById('opt_country').innerHTML = strInnerHTML;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="optCountry" id="opt_country">
</select>

Answer 9

Answer №5

    var countries = JSON.parse('{
    "BD": "Bangladesh",
    "BE": "Belgium",
    "BF": "Burkina Faso",
    "BG": "Bulgaria",
    "BA": "Bosnia and Herzegovina"
    }');

    //using jQuery
    countryList=[]
    $.each(countries, function(code,name) {
        countryList.push(name);
    });

     $.each(countryList, function (index, name) {
                         $("#opt_country").append($("<option></option>").val(index).html(name));
                    });

//add the following script to include jQuery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Answer 10

    var countries = JSON.parse('{
    "BD": "Bangladesh",
    "BE": "Belgium",
    "BF": "Burkina Faso",
    "BG": "Bulgaria",
    "BA": "Bosnia and Herzegovina"
    }');

    //using jQuery
    countryList=[]
    $.each(countries, function(code,name) {
        countryList.push(name);
    });

     $.each(countryList, function (index, name) {
                         $("#opt_country").append($("<option></option>").val(index).html(name));
                    });

//add the following script to include jQuery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

How can I populate a dropdown list in JavaScript with JSON data from a file?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Show or hide a Div based on radio button selection problem

Importing a JSON file into a React component

Dismiss MUI Snackbar notification and execute action upon pressing a key

Step by step guide on duplicating an AMI through CloudFormation

The effective method for transferring a PHP variable value between two PHP files using jQuery

Moving the Promise.all feature from AngularJs to VueJs

Utilize the key-value pair from ng-repeat to expand the scope of the expression

How can a JSON object with duplicate property names be serialized and deserialized in a predetermined sequence?

What are the steps I need to take in order to resolve the

How can I troubleshoot jQuery not functioning in iOS even though it works on Safari?

Troubles with retrieving native SQL Server JSON data

AngularJs is being used to extract data from Firebase with the help of $value, $id, and

Tips for preserving input field data in an AngularJS scope variable

Issue arises when isomorphic-dompurify is used alongside dompurify in Next.js 13 causing compatibility problems

Ways to categorize by a particular date

Update the message displayed in the user interface after the view has been fully rendered in an Express application, following the execution of asynchronous

Exploring Vue's reactivity using the composition API and cloning props

Obtain the value of key2 when the value of key1 is matched?

Unable to change placeholder in Material UI's Select Form

Obtaining the keys of an array from a JSON input