Read JSON from file to dropdownlist in JavaScript?

Question

I'm having trouble reading JSON files for inclusion in the drop-down list.

JSON:

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

I want to put values into the dropdownlist as follows: 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>

prasanth · Accepted Answer · 2017-05-24 06:52:41Z

2

Try with JSON.parse() use with convert the json string to Object and Object.keys() use with separate the key value to array .Then iterate the key value using Array#forEach .document.createElement used for create the select element form the Dom

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>'
})

edited May 24, 2017 at 6:52

answered May 24, 2017 at 6:47

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

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

Comments

user5733510 · Accepted Answer · 2017-05-24 06:51:02Z

0

How about something like this? It is considered that your JSON data is stored in the variable js_data:

const droplist = document.getElementById("opt_country")
droplist.innerHTML = "" //clear the dropdown list
Object.getOwnPropertyNames(js_data).forEach(function(element){
    droplist.innerHTML += '<option value="'+element+'">'+js_data[element]+'</option>'
})

answered May 24, 2017 at 6:51

user5733510

Comments

Ataur Rahman Munna · Accepted Answer · 2017-05-24 06:53:43Z

0

Iterate over your json by Object.prototype.hasOwnProperty() and make an option group.then append it to a select element using innerHTML.

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>

edited May 24, 2017 at 6:53

answered May 24, 2017 at 6:47

Ataur Rahman Munna

3,9151 gold badge25 silver badges35 bronze badges

Comments

Arun D · Accepted Answer · 2017-05-24 06:57:17Z

0

Try this code

var Country= {
"BD": "Bangladesh",
"BE": "Belgium",
"BF": "Burkina Faso",
"BG": "Bulgaria",
"BA": "Bosnia and Herzegovina"
}
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>

answered May 24, 2017 at 6:57

Arun D

4743 gold badges8 silver badges26 bronze badges

Comments

Harrisss · Accepted Answer · 2017-05-24 06:58:25Z

0

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

    //using jquery
    x=[]
    $.each(myObj, function(i,n) {
        x.push(n);});

     $.each(x, function (key, value) {
                         $("#opt_country").append($("<option></option>").val(key).html(value[key]));
                    });

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

answered May 24, 2017 at 6:58

Harrisss

3631 silver badge11 bronze badges

Collectives™ on Stack Overflow

Read JSON from file to dropdownlist in JavaScript?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related