CODEWITHSUNDEEP
javascripthtmljqueryjson
Jesse Murrell
Jesse Murrell

Reputation: 13

I am trying to create dynamic html options from a JSON file using javascript

I'm trying to create a html form which has two option dropdowns that are dynamic (the second's value dependant on the first). The value from the second option will then feed into the submit button, which is a link. The data for the buttons comes from a JSON file. I know I'll have to use JS & JQUERY to achieve this but I'm not great with JS.

The output for the first option I want is as as follows:

<select id="first_choice">
  <option selected value="base">Please Select Country</option>
  <!-- Appended options -->
  <option value="Afghanistan">Afghanistan</option>
  <option value="France">France</option>
  <option value="United Arab Emirates">United Arab Emirates</option>
  <option selected value="United Kingdom">United Kingdom</option>
</select>

Then if 'United Arab Emirates' were selected for example, the second dropdown should be filtered/populated as follows:

<select id="second-choice">
  <option selected>Please Select Language</option>
  <!-- Appended options -->
  <option value="https://www.mysite.ae/lang=ar">Arabic</option>
  <option value="https://www.mysite.ae/lang=en">English</option>
  <option value="https://www.mysite.ae/lang=hi">Hindi</option>
  <option value="https://www.mysite.ae/lang=fa">Persian</option>
  <option value="https://www.mysite.ae/lang=ur">Urdu</option>
</select>

The value for the second option would then be used for the submit, which would be a link.

My JSON file is formatted as follows:

{
"Afghanistan":{
    "Persian":"https://www.mysite.af/lang=fa",
    "Pushto":"https://www.mysite.af/lang=ps",
    "Pashto":"https://www.mysite.af/lang=ps"
},
"Albania":{
    "Albanian":"https://www.mysite.al/lang=sq",
    "English":"https://www.mysite.al/lang=en"
},
"United Kingdom of Great Britain and Northern Ireland":{
    "English":"https://www.mysite.co.uk/lang=en"
},
"United Arab Emirates":{
    "Arabic":"https://www.mysite.ae/lang=ar",
    "English":"https://www.mysite.ae/lang=en",
    "Hindi":"https://www.mysite.ae/lang=hi",
    "Persian":"https://www.mysite.ae/lang=fa",
    "Urdu":"https://www.mysite.ae/lang=ur"
}

As I said, I'm not great with Javascript so any help would be really appreciated!

Upvotes: 0

Views: 243

Answers (1)

54ka
54ka

Reputation: 3589

This script will turn your data into a two-step selection in drop-down menus

var data = {
    "Afghanistan": {
        "Persian": "https://www.mysite.af/lang=fa",
        "Pushto": "https://www.mysite.af/lang=ps",
        "Pashto": "https://www.mysite.af/lang=ps"
    },
    "Albania": {
        "Albanian": "https://www.mysite.al/lang=sq",
        "English": "https://www.mysite.al/lang=en"
    },
    "United Kingdom of Great Britain and Northern Ireland": {
        "English": "https://www.mysite.co.uk/lang=en"
    },
    "United Arab Emirates": {
        "Arabic": "https://www.mysite.ae/lang=ar",
        "English": "https://www.mysite.ae/lang=en",
        "Hindi": "https://www.mysite.ae/lang=hi",
        "Persian": "https://www.mysite.ae/lang=fa",
        "Urdu": "https://www.mysite.ae/lang=ur"
    }
}


var firstChoice = document.getElementById('first_choice');
var first = Object.keys(data);

for (var i = 0; i < first.length; i++) {
    firstChoice.innerHTML += '<option value="' + first[i] + '">' + first[i] + '</option>';
}

firstChoice.addEventListener("change", function () {
    if (this.value.length > 0) {
        secondDropDown(this.value);
    } else {
        var sec = document.getElementById('second_choice');
        sec.innerHTML = '';
    }
});

function secondDropDown(x) {

    var sec = document.getElementById('second_choice');

    sec.innerHTML = '<option selected>Please Select Language</option>';

    var y = data[x];
    for (const [key, value] of Object.entries(y)) {
        sec.innerHTML += '<option value="' + value + '">' + key + '</option>';
    }

}
<select id="first_choice">
    <option selected value="">Please Select Country</option>
    <!-- Appended options -->
</select>

<select id="second_choice">
</select>

Upvotes: 1

Related Questions