如何使用纯JavaScript遍历数组 [英] How to loop through an array with pure javascript

问题描述

我有一个空的下拉列表，该列表取决于另一个下拉列表中的值。我想用香草JS（而不是Jquery）编写它，它将使用示例数据填充下拉列表，如下所示

I have an empty dropdown list that is dependent on the value from another dropdown. I want to write it with vanilla JS not Jquery that will populate the dropdown with the sample data as shown below

下面是示例数据：

[{"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>

每当我选择主值时，从属下拉列表在select标记上返回空，但上面的示例数据每当我在网络标签下查看响应时，都会显示。请在这里提供帮助。

Whenever I select the main value, the dependent dropdown returns empty on the select tag but the sample data above is shown whenever I view the response under the network tab. Please assist here.

推荐答案

使用纯JavaScript可以有很多不同的方法。

There are many different ways you could do this using pure javascript.

一旦从GET请求中接收到数据数组，就可以使用for循环遍历 data 并创建一个大的html字符串（每个< option> 的 htmlToInsert ），并在其中包含相关数据。

Once you receive your array of data from your GET request, you could use a for loop to iterate through the data and create one big html string (htmlToInsert) of each <option> with the relevant data inside.

Object.entries（）返回一个数组，该数组的元素是与直接在对象上发现的可枚举字符串键属性[key，value]对相对应的数组。

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

然后您可以使用数组解构分配，以获取键和值对。

Then you can use array destructuring assignment to get the key and value pair.

一旦有了，您可以简单地使用 Element.insertAdjacentHTML（）

Once you have that, you can simply insert it with Element.insertAdjacentHTML()

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

Note: for performance reasons, it is best practice to batch all your DOM changes at once, instead of changing the DOM inside a loop.

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>

这篇关于如何使用纯JavaScript遍历数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！