Creating the three level dependent drop-down list with array of objects using JavaScript

Question

I am creating three level drop-down list from the array of objects which I fetched from the API(dynamic data). I tried removing the duplicate values from ssmlGender(Voice gender) field and did try different methods. But, couldn't fetch the right data.

In first drop-down list, I am displaying the gender: "Female" and "Male" from "ssmlGender" field. When the user selects the male or female in the first drop-down list, the second drop-down list must be populated with "languageCodes" available for the particular gender. When the language code is selected, the "name" field which has the both the selected gender and languageCodes should be displayed.

Sample Array:

0: {languageCodes: Array(1), name: "es-ES-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
1:
{languageCodes: Array(1), name: "it-IT-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
2:
{languageCodes: Array(1), name: "ja-JP-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 22050}
3:
{languageCodes: Array(1), name: "ko-KR-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 22050}
8:{languageCodes: Array(1), name: "en-US-Wavenet-D", ssmlGender: "MALE", naturalSampleRateHertz: 24000}
9:
{languageCodes: Array(1), name: "en-US-Wavenet-A", ssmlGender: "MALE", naturalSampleRateHertz: 24000}
10:
{languageCodes: Array(1), name: "en-US-Wavenet-B", ssmlGender: "MALE", naturalSampleRateHertz: 24000}
11:
{languageCodes: Array(1), name: "en-US-Wavenet-C", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
12:
{languageCodes: Array(1), name: "en-US-Wavenet-E", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
13:
{languageCodes: Array(1), name: "en-US-Wavenet-F", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
14:
{languageCodes: Array(1), name: "en-GB-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
15:
{languageCodes: Array(1), name: "en-GB-Standard-B", ssmlGender: "MALE", naturalSampleRateHertz: 24000}

When we click on the particular array, it will display the data as given in this link: https://i.sstatic.net/BFYGm.jpg

My HTML:

 <div class="row">
                <label>Voice Gender</label>
                <div class="input-field col s12">                    
                    <select id="gender">
                            <option value="" selected>Choose your option</option>                                                     
                            </select>
                </div>
        </div>

        <div class="row">
                <label>Voice Language</label>
                <div class="input-field col s12">
                    <select id="languages">
                        <option value="" selected>Choose your languages</option>
                    </select>
                </div>
            </div>

        <div class="row">
                <label>Voice Name</label>
                <div class="input-field col s12">                    
                    <select id="entries">
                            <option value="" selected>Choose your option</option>                           
                            </select>
                </div>
        </div>

My JavaScript:

for(var i=0;i<response.result.voices.length;i++){
         var values= response.result.voices;

            //To remove the duplicate value of "Male" and "Female" iteration and to display only once. 

            var valueArr = values.map(function(item){ return item.ssmlGender });
                    var isDuplicate = valueArr.some(function(item, idx){ 
                        return valueArr.indexOf(item) != idx 
                    });
                    console.log(isDuplicate);
$('#entries').append('<option value='+(i+1)+'>' + response.result.voices[i].name+ '</option>');


        //Added custom options of "MALE" AND "FEMALE" directly into the voice gender field of HTML to remove the duplicate values.But, it didn't work out. 

        /*if(document.getElementById("gender").value=="FEMALE"){
             if(response.result.voices[i].ssmlGender=="FEMALE")
               {
                 finalLanguages=response.result.voices[i].languageCodes;
                 }                            
               }
        if(document.getElementById("gender").value =="MALE"){
              if(response.result.voices[i].ssmlGender=="MALE")
                   {
                     finalLanguages=response.result.voices[i].languageCodes;
                     }
                  }                 
   $("#languages").append('<option value=' + (i+1)+ '>'+finalLanguages+ '</option>');*/
                          }

Thanks so much.

Jolaade Adewale · Accepted Answer · 2018-06-20 16:22:59Z

1

let languageCodes = [
{ languageCodes: ['123'], name: 'es-ES-Standard-A', ssmlGender: 'FEMALE', naturalSampleRateHertz: 2403},
{languageCodes: ['214'], name: 'it-IT-Standard-A', ssmlGender: 'MALE', naturalSampleRateHertz: 21000},
{languageCodes: ['147'], name: 'ja-JP-Standard-A', ssmlGender: 'FEMALE', naturalSampleRateHertz: 3200},
{languageCodes: ['290'], name: 'ko-KR-Standard-A', ssmlGender: 'MALE', naturalSampleRateHertz: 2330},
{languageCodes: ['173'], name: 'en-US-Wavenet-B', ssmlGender: 'FEMALE', naturalSampleRateHertz: 412},
{languageCodes: ['583'], name: 'en-GB-Standard-A', ssmlGender: 'MALE', naturalSampleRateHertz: 8493}
];

// Register Change listeners
function registerEventListeners() {
 document.getElementById('gender').addEventListener('change',  changeVoiceLanguageOption, false);
 document.getElementById('languages').addEventListener('change',  changeVoiceNameOption, false);
}

function changeVoiceNameOption() {
	const valueSelected = document.getElementById('languages').value;
  let entriesElement = document.getElementById('entries');
  entriesElement.innerHTML = '';
  entriesElement.innerHTML += '<option value="" selected>Choose your option</option>'
  
  languageCodes.filter(( item ) => {
    return item.languageCodes.includes(valueSelected);
  }).forEach(( item ) => {
  	entriesElement.innerHTML += `<option value="${item.name}"> ${item.name} </option>`
  })
}

function changeVoiceLanguageOption() {
 const valueSelected = document.getElementById('gender').value;
 let languageElement = document.getElementById('languages');
 languageElement.innerHTML = ''; // This is what prevents duplication
 languageElement.innerHTML += '<option value="" selected>Choose your languages</option>'
  
  languageCodes.filter(( item ) => {
    return item.ssmlGender === valueSelected;
  }).forEach(( filteredItems ) => {
  	filteredItems.languageCodes.forEach(( languageCode ) => {
    	languageElement.innerHTML += `<option value="${languageCode}"> ${languageCode} </option>`
    })
  })
  
  
}

function populateGender() {

let genderElement = document.getElementById('gender');
  let genderObject = {};
  languageCodes.forEach(( item ) => {
    genderObject[item.ssmlGender] = '';
  })
  Object.keys(genderObject).forEach(( item ) => {
    genderElement.innerHTML += `<option value="${item}"> ${item} </option>`
  })
}

registerEventListeners();
populateGender();

<div class="row">
                <label>Voice Gender</label>
                <div class="input-field col s12">                    
                    <select id="gender">
                            <option value="" selected>Choose your option</option>                                                     
                            </select>
                </div>
        </div>

        <div class="row">
                <label>Voice Language</label>
                <div class="input-field col s12">
                    <select id="languages">
                        <option value="" selected>Choose your languages</option>
                    </select>
                </div>
            </div>

        <div class="row">
                <label>Voice Name</label>
                <div class="input-field col s12">                    
                    <select id="entries">
                            <option value="" selected>Choose your option</option>                           
                            </select>
                </div>
        </div>

edited Jun 20, 2018 at 16:22

answered Jun 19, 2018 at 13:26

Jolaade Adewale

3365 silver badges10 bronze badges

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

5 Comments

aadhira Over a year ago

Thanks! The gender field and name field works good. But, getting the repetition in "language" field - second field. Attaching the screenshot: imgur.com/4kT6asd. Also the array contains the "LanguageCodes" as one of its objects as given in the main post imgur link. So, when tried I with other name(ex:responseArray, in order to avoid array element collision) , I was not the getting any elements in the "language" field at all.

aadhira Over a year ago

I tried using Set, Object.Key and other methods, I couldn't eliminate the duplication in "languages" code- second field. Is there any other ways to remove the duplication?

Jolaade Adewale Over a year ago

In the code above, I eliminated the duplication by setting innerHTML = ''" const valueSelected = document.getElementById('gender').value; let languageElement = document.getElementById('languages'); languageElement.innerHTML = '';

Jolaade Adewale Over a year ago

You can paste the code you have, with the data. Let me take a look

aadhira Over a year ago

I have create the unique array with the Set function to iterate and stored the values like this: var uniq= [...new Set(langArray)]; uniq.forEach((item)=>{ languageElement.innerHTML += <option value="${item}"> ${item} </option>` })` It worked. But, third field "name" displays only the values corresponding to "language" by including the values of both the genders.

aadhira · Accepted Answer · 2018-06-21 13:09:44Z

0

Is there any other way to compare the both the "language" and "gender" field and display the result based on it?

I have re-written the changeVoiceNameOption() like this. I couldn't get the result.

        function changeVoiceNameOption() {
genderSelected=document.getElementById('gender').value;
        const languageSelected = document.getElementById('languages').value;
        let entriesElement = document.getElementById('entries');
        entriesElement.innerHTML = '';
        entriesElement.innerHTML += '<option value="" selected>Choose your option</option>'
        var nameArray=[];
    languageCodes.filter(( item ) => {
    return item.ssmlGender.includes(genderSelected);
    }).forEach(( filteredItems ) =>  {filteredItems.languageCodes.forEach(( languageCode ) => {return filteredItems.languageCodes.includes(languageSelected);                        
    })
     }).forEach(( filteredItems ) =>  {
    entriesElement.innerHTML += `<option value="${item.name}"> ${item.name} </option>`
    })
     }

answered Jun 21, 2018 at 13:09

aadhira

3211 gold badge4 silver badges16 bronze badges

1 Comment

Jolaade Adewale Over a year ago

languageSelected.innerHTML = ''; can you do that

Collectives™ on Stack Overflow

Creating the three level dependent drop-down list with array of objects using JavaScript

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related