将数组中的两个对象与变量进行比较以显示第三个对象

Question

我有一个数组“ languageCodes”。 我得分别将对象“ ssmlGender”和“ languageCodes”与变量“ genderSelected”和“ languageSelected”进行比较。 如果两者都为真，则必须显示数组的相应“名称”字段。 我确实尝试过使用forEach进行两级过滤，并将值存储在Array中。 但是，只有一个空的。

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}
];

我的JavaScript函数：

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

Answer 1

这行看起来不正确：

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

您正在针对性别选择过滤语言，这将返回一个空数组

另外，在返回的forEach中，然后尝试进行推送，nameArray.push将永远不会发生

Answer 2

过滤可以简化的方式进行。 假设声明了genderSelected变量，这应该可以工作：

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>`);

}