Comparing the two objects in an array with variables to display the third object

Question

I have an array "languageCodes". I gotta compare the objects "ssmlGender" and "languageCodes" with the variables "genderSelected" and "languageSelected" respectively. If both are true, I have to display the corresponding "name" fields of the array. I did try two level filtering with forEach and stored the value in the Array. But, only got the empty one.

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

My JavaScript Function:

function changeVoiceNameOption() {
            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>`
            })
            }

A. Llorente · Accepted Answer · 2018-06-21 12:34:18Z

1

This lines look incorrect:

languageCodes.filter(( item ) => {
    return item.languageCodes.includes(genderSelected);
})

You are filtering the languages against the genderSelected, that will return an empty array

Plus in the forEach you return and then try to push, the nameArray.push will never happen

answered Jun 21, 2018 at 12:34

A. Llorente

1,1826 silver badges18 bronze badges

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

1 Comment

aadhira Over a year ago

Thanks for pointing out that. Was confused with same array name and object name. Now I have changed the array. Still couldn't get the output.

Leonid Pyrlia · Accepted Answer · 2018-06-21 15:16:28Z

0

Filtering can be done in a simplified manner. Assuming genderSelected variable is declared, this should work:

function changeVoiceNameOption() {

    const languageSelected = document.getElementById('languages').value;
    let entriesElement = document.getElementById('entries');

    const filteredItems = languageCodes.filter(({languageCodes: langs, ssmlGender: gender}) => langs[0] === languageSelected && gender === genderSelected);

    entriesElement.innerHTML = '';
    entriesElement.innerHTML += '<option value="" selected>Choose your option</option>'

    filteredItems.forEach(item => entriesElement.innerHTML += `<option value="${item.name}"> ${item.name} </option>`);

}

answered Jun 21, 2018 at 15:16

Leonid Pyrlia

1,7322 gold badges12 silver badges16 bronze badges

3 Comments

aadhira Over a year ago

Thanks so much. It worked. Could you please explain the operation over here in this line

const filteredItems = languageCodes.filter(({languageCodes: langs, ssmlGender: gender}) => langs[0] === languageSelected && gender === genderSelected)

-why do we declare langs[0] and not with gender as gender[0]?

Leonid Pyrlia Over a year ago

@srikha: ‘langs’ is an alias for languageCodes, and it is an array as given in your example, hence we are accessing it with [0]. ‘gender’ is an alias for ssmlGender, which is a string, and we access it direclty. The aliasing is done as a part of ES6 object assignment destructuring. The filter function simply checks for two conditions: if first item in langs array is equal to the one selected, and if the gender is equal to the specified one

aadhira Over a year ago

Cool. Now, I am getting it. Thanks for the clear explanation.

Collectives™ on Stack Overflow

Comparing the two objects in an array with variables to display the third object

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related