javascript - 下拉列表的第一项未定义

Question

我正在脚本标记中调用外部 JSON 文件。下拉菜单正常呈现 JSON 文件，但元素“未定义”被附加到下拉值中。

这是我的 JSON 文件:

{
"vendor_name":["User 1", "User 2", "User 3"]
}

这是我的 HTML 代码:

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data- 
    toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu vendorDropdown">

    </ul>
</div>

这是我的脚本标签:

<script>
fetch('vendorName.json')
.then(res => res.text())
.then(item => {
    let items = JSON.parse(item)
    let output
    console.log(items)
    items.vendor_name.map(item => {
        output += `
        <li>
        ${item}
        </li>
        `
    });
    $('.vendorDropdown').append(output)
})
</script>

这是我在下拉值中的最终输出:

undefined
User 1
User 2
User 3

Answer 1

初始化输出的方式是创建一个空元素。相反，最好用空字符串之类的东西初始化它，然后添加您的值。

让输出 = ""; 就可以了。