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

Question

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

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中再尝试push，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>`);

}