如何使用Javascript基于给定JSON数组创建动态下拉选择框

问题原因 #

你当前的循环是遍历外层数组，该数组仅包含1个存储所有下拉选项键值对的对象，因此只能生成1个值为001的选项，无法覆盖所有可选值。

正确实现代码 #

// 初始化select标签
let text = "<select class='form-control'><option value=''>All</option>";
                        
const array = [
    {
        "1": "001",
        "2": "002",
        "3": "003"
    }
];
// 取出数组中存储选项的对象
const optionMap = array[0];
// 遍历对象的所有键值对生成option
for (const [key, value] of Object.entries(optionMap)) {
    text += `<option value="${value}">${value}</option>`;
    // 如果你需要把对象的键作为value、值作为显示文本，就改成下面的写法
    // text += `<option value="${key}">${value}</option>`;
}
// 闭合select标签
text += "</select>";

// 最后将生成的下拉框插入到页面指定位置，示例是插入到body，你可以替换为你需要的DOM容器
document.body.innerHTML = text;

兼容旧浏览器的写法（不支持ES6+语法的场景） #

let text = "<select class='form-control'><option value=''>All</option>";
var array = [
    {
        "1": "001",
        "2": "002",
        "3": "003"
    }
];
var optionMap = array[0];
for (var key in optionMap) {
    // 过滤对象原型上的属性
    if (optionMap.hasOwnProperty(key)) {
        var value = optionMap[key];
        text += '<option value="' + value + '">' + value + '</option>';
    }
}
text += "</select>";
document.body.innerHTML = text;

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