Question

我是JavaScript和堆栈溢出的新手，因为卡住了，我要求您的帮助。

所以这里有两种方法。第一种方法从[members.state]列表中动态创建一个select下拉菜单。

第二种方法从列表中删除重复项，并仅保留列表中的唯一数据。使用console.log两种方法都可以很好地工作。我已经在选择菜单中显示了数据，但是无法删除重复项。

问题是：如何结合这两种方法以相互调用并能够一起工作？

我期待您的意见，并希望有一天我能获得技能，以帮助这个惊人社区中的其他人。

function getCities() {
    for (var i = 0; i < members.length; i++) {
        var opt = members[i].state;
        var el = document.createElement("option"); //create option
        el.textContent = opt; //create text space
        el.value = opt;
        select.appendChild(el); //assign the text
    }

}
getCities();



function removeDuplicates(arr){

    let unique_array = [];
     //   let test = [];


    for(let i = 0;i < arr.length; i++){
        if(unique_array.indexOf(arr[i].state) == -1){
            unique_array.push(arr[i].state);
          test.push(arr[i].state);

        }

    }
    console.log(test);

    return unique_array;
}
removeDuplicates(members);

Answer 1

您可以从getCities函数中调用过滤功能，并将该过滤后的列表用作Members数组的来源。

更新-刚刚将原始数组编辑为对象数组-为您提供了OP中所需的state属性。刷新，您将看到，即使原始数组中存在重复的对象，也只有3个唯一值被传递到选择列表。

请注意，您可以将过滤作为单个函数的一部分-但我将其保留为单独的函数，以使您有使用数组作为参数调用另一个方法的经验。

我还将for循环更改为更现代的forEach循环，以使解决方案具有现代气息。

var arr = [
 { name: 'test1', state: 'test-state-1'},
 { name: 'test1', state: 'test-state-1'},
 { name: 'test2', state: 'test-state-2'},
 { name: 'test2', state: 'test-state-2'},
 { name: 'test3', state: 'test-state-3'}
];

getCities();


function getCities() {
  var filteredMembers = removeDuplicates(arr);
  console.log(filteredMembers);
   
    filteredMembers.forEach(function(member){
        var opt = member;
        var select = document.querySelector('select');
        var el = document.createElement("option"); //create option
        el.textContent = opt.state; //create text space
        el.value = opt.state;
        select.appendChild(el); //assign the text
    })
}


function removeDuplicates(arr){
 
    var unique_array = [];
    var tempArr = [];

   arr.forEach(function(item){
        if(tempArr.indexOf(item.state) == -1){
           unique_array.push(item);
           tempArr.push(item.state);
         }
     });

    return unique_array;
}

<select></select>

Answer 2

最好不要依赖另一个功能。并称它们为嵌入式。

let members = [
 { name: 'test1', state: 'test-state-1'},
 { name: 'test1', state: 'test-state-1'},
 { name: 'test2', state: 'test-state-2'},
 { name: 'test2', state: 'test-state-2'},
 { name: 'test3', state: 'test-state-3'}
];

getCities(removeDuplicates(members));


function getCities(members) {
	let select = document.querySelector('select');
	for (let i = 0; i < members.length; i++) {
    let opt = members[i];
    let el = document.createElement("option"); //create option
    el.textContent = opt; //create text space
    el.value = opt;
    select.appendChild(el); //assign the text
}
}
	


function removeDuplicates(arr){

let unique_array = [];


for(let i = 0;i < arr.length; i++){
    if(unique_array.indexOf(arr[i].state) == -1){
        unique_array.push(arr[i].state);
    }
}

return unique_array;
}

<select></select>

一次调用两个方法

2 个答案: