调用私有API获取数据后无法渲染复选框的问题排查

核心问题分析 #

1. 循环中覆盖HTML内容而非累加：你在forEach里直接用output = ...赋值，每次循环都会覆盖之前的内容，最终output只会保留最后一条产品的复选框代码，若API返回多条数据，前面的都会丢失。
2. 错误插入目标元素：你把生成的HTML插入到了#US这个单选按钮<input>元素中——<input>属于空元素，本身无法承载innerHTML内容，修改它的innerHTML还会破坏原有单选按钮结构。
3. 未声明变量引发隐患：output没有用let/const声明，会成为全局变量，可能引发意外的作用域冲突。

解决步骤与修改代码 #

1. 调整HTML结构，添加复选框容器

在US单选按钮的div后，新增一个专门用来承载复选框的容器：

<div class="form-group form-check-inline">
    <input class="form-check-input" type="radio" name="region" id="US" value="US">
    <label class="form-check-label" for="US">US</label>
</div>
<!-- 新增复选框容器 -->
<div id="us-products-container" class="mt-3"></div>

2. 修改JavaScript逻辑

修正循环累加逻辑，将内容插入到正确的容器中：

document.addEventListener('DOMContentLoaded', () => {
    const urlUS = new URL("http://127.0.0.1:3000/api/v1/regionApi/regionProduct/1");
    document.getElementById('US').addEventListener('click', getRegionUS);

    function getRegionUS() {
        fetch(urlUS, { method: 'GET' })
            .then(res => res.json())
            .then(data => {
                let output = '';
                // 处理空数据场景
                if (data.length === 0) {
                    output = '<p>暂无可用产品</p>';
                } else {
                    data.forEach(product => {
                        // 用+=累加所有产品的复选框HTML
                        output += `
                        <div class="form-group form-check">
                            <input class="form-check-input" type="checkbox" value="${product.productname}" id="${product.id}">
                            <label class="form-check-label" for="${product.id}">${product.productname}</label>
                        </div>
                        `;
                    });
                }
                // 将内容插入到专门的容器
                document.getElementById('us-products-container').innerHTML = output;
                console.log(data);
            })
            .catch(error => console.log('请求错误:', error));
    }
});

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