javascript - 如何使用纯 JavaScript 循环遍历数组

Question

我有一个空的下拉列表，它依赖于另一个下拉列表中的值。我想用 vanilla JS 而不是 Jquery 来编写它，它将用示例数据填充下拉列表，如下所示

以下是示例数据:

[{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]

HTML:

<select name="states" id="profileapplicationform-lga_id">
<option value="">Select one</option>
</select>

JS

<script type="text/javascript">
    window.onload = function(e){
        var select = document.getElementById("profileapplicationform-state_origin_id");
        select.addEventListener('change', function(){
            $.ajax({
                type: 'GET',
                url: baseurl,
                data: {state_origin_id: this.value},
                success: function(data){
                    var list = document.getElementById("profileapplicationform-lga_id");
                    var html ='';
                    for (var i =1; i<data.length; i++){
                        html+= '<option value="' +data[i][0]+ '">' +data[i][1]+ '</option>';
                    }
                    list.append(html);;
                },              
            }); 
        });
    }
</script>

每当我选择主值时，相关下拉列表在选择标记上返回空，但每当我在网络选项卡下查看响应时，都会显示上面的示例数据。请在此提供帮助。

Answer 1

您可以通过多种不同的方式使用纯 JavaScript 来完成此操作。

从 GET 请求收到数据数组后，您可以使用 for 循环来迭代 data并为每个 htmlToInsert 创建一个大的 html 字符串( <option> )里面有相关数据。

<小时/>

Object.entries() returns an array whose elements are arrays corresponding to the enumerable string-keyed property [key, value] pairs found directly upon object.

然后你可以使用array destructuring assignment获取 key和value一对。

一旦你有了它，你可以简单地用 Element.insertAdjacentHTML() 插入它

<小时/>

注意:出于性能原因，最佳实践是一次性批处理所有 DOM 更改，而不是在循环内更改 DOM。

const data = [{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]


let htmlToInsert = ''

for (let i = 0; i < data.length; i++) {
  const [[key, val]] = Object.entries(data[i])
  htmlToInsert += `<option value="${key}">${val}</option>`
}


const select = document.querySelector('#profileapplicationform-lga_id')
select.insertAdjacentHTML('beforeend', htmlToInsert)

<select name="states" id="profileapplicationform-lga_id">
  <option value="">Select one</option>
</select>