JavaScript如何正确存储数据为指定格式对象数组（代码排错）

你的代码存在3处直接导致异常的错误：

• 数组赋值逻辑错误：你使用pumpsdata[pumps[j].pump_id] = pumps[j].pump_name的写法，本质是给数组对象挂载字符串键名的自定义属性，并没有向数组中插入有效元素。JavaScript数组的length属性仅统计数字索引的元素个数，因此无论你挂多少个自定义属性，数组长度始终显示为0，后续基于长度的循环根本不会执行。控制台打印出的ghaga123: "Joe Root"是数组对象的属性，不是数组成员。
• 数据结构不符合预期：你需要存储的是包含id、name字段的对象，但现有代码直接把泵名称赋值给字符串键，没有生成目标对象结构。
• 循环变量笔误：渲染选项的循环定义的计数变量是k，但内部取值时误用了未定义的变量i，就算数组正常有值，这里也会抛出引用错误。

另外你没有在每次触发选择变更时清空旧选项，多次切换下拉项会导致选项重复叠加。

只需要替换myFunction函数部分即可：

function myFunction() {
    const pumpsdata = [];
    const typeSelect = document.getElementById("jobSel");
    const typeValue = typeSelect.options[typeSelect.selectedIndex].value;
    const targetSelect = document.getElementById('sel');
    // 重置下拉框默认选项，清空上次渲染的内容
    targetSelect.innerHTML = '<option value="">Please select option</option>';

    for (let j = 0; j < pumps.length; j++) {
        if (pumps[j].fuel_type == typeValue) {
            // 按预期结构生成对象，通过push方法插入数组，保证length正常计数
            pumpsdata.push({
                id: pumps[j].pump_id,
                name: pumps[j].pump_name
            });
        }
    }
    console.log(pumpsdata);
    // 遍历数组渲染选项，修正循环变量名
    for (let k = 0; k < pumpsdata.length; k++) {
        const option = document.createElement('option');
        option.value = pumpsdata[k].id;
        option.textContent = pumpsdata[k].name;
        targetSelect.appendChild(option);
    }
}

修复后pumpsdata会输出你预期的结构，数组长度和匹配到的数据条数一致，下拉选项可以正常渲染。

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