如何遍历含相同键的JSON对象并为select控件添加选项？

问题分析 #

原代码在生成下拉框(select)时，先将空下拉框添加到DOM再异步请求选项数据，但未建立请求与对应下拉框的关联，导致无法正确填充选项。我们需要给每个下拉框添加唯一标识，在获取到选项数据后精准定位填充。

修改后的完整代码 #

$.get("http://localhost:8000/api_routes/agriculture_and_food_structure", function(data) {
    data = JSON.parse(data);
    
    for (let prop in data) {
        for (let prop2 in data.form.fields) {
            let field = data.form.fields[prop2];
            let typ = field.type;
            let label = field.label;
            let text_input = '';

            if (typ == 'text') {
                text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <input type="text" data-model="' + field["data-model"] + '" class="form-control" id="exampleFormControlInput1" placeholder="" name="' + field.name + '"></div></div>';
            }
            if (typ == 'number') {
                text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <input type="number" data-model="' + field["data-model"] + '" class="form-control" id="exampleFormControlInput1" placeholder="" name="' + field.name + '"></div></div>';
            }
            if (typ == 'select') {
                // 生成带name属性的select结构，用于后续定位
                let selectElement = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <select class="form-control" name="' + field.name + '"></select></div></div>';
                // 先将select添加到DOM
                $('#form').append(selectElement);
                
                // 请求选项数据并填充
                $.get("http://localhost:8000/data_routes/materials_data", function(dt) {
                    let options = '';
                    // 遍历第二个JSON的data数组，生成option标签
                    dt.data.forEach(item => {
                        options += '<option value="' + item.en + '">' + item.en + '</option>';
                    });
                    // 通过name属性找到对应select，填充选项
                    $('select[name="' + field.name + '"]').html(options);
                });
                continue;
            }
            $('#form').append(text_input);
        }
    }
});
console.log('mounted');

关键修改点 #

• 给所有表单控件添加name属性（复用字段定义中的name值），确保每个下拉框有唯一标识。
• 处理select字段时，先将空下拉框加入DOM，再在异步请求回调中，通过name属性定位到目标下拉框，遍历选项数据生成<option>标签并填充。
• 补全了表单控件的data-model属性赋值，与字段定义保持一致。

内容的提问来源于stack exchange，提问作者Gandalf