Javascript 下拉列表的第一项未定义

我正在脚本标记中调用外部JSON文件。下拉列表通常呈现JSON文件，但元素“undefined”被附加到下拉列表值中

这是我的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>

---

初始化

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

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

let output=”“
可以。
您是否尝试过将
输出初始化为空字符串“”，而不是简单地声明它（henc
未定义
）？
您是否尝试过将
输出初始化为空字符串“”，而不是简单地声明它（henc
未定义
）？
问题在于，您正在向名为
输出的变量追加内容
output
最初的值为
undefined
，这就是为什么在结果字符串中看到它（在追加之后）。要避免此问题，您可以更改此行：

let输出

为此：

let output=''

或者，您可以执行类似于下面的操作，我使用
map
和
join
而不是附加到自变量。我使用
setTimeout
包装在
Promise
中来模拟
fetch
调用


constulel=document.querySelector（'.vendorDropdown'）；
常量模拟蚀刻=（）=>{
ulEl.innerHTML='正在获取JSON。请稍候..'；
//模拟数据
常量json={
“供应商名称”：[“用户1”、“用户2”、“用户3”]
};
//Promise解析一些JSON数据
返回新承诺（（解决、拒绝）=>{
setTimeout（（）=>resolve（json），1500）；
});
};
document.querySelector（'button'）。addEventListener（'click'，（）=>{
simulateFetch（）。然后（json=>{
//创建HTML并将其附加到ul
const liEls=json['vendor_name'].map（vendor=>`
${vendor}
`）；
ulEl.innerHTML=liEls.join（“”）
})
.catch（err=>console.error（err））；
});

下拉示例


问题在于，您正在向名为
输出的变量追加内容
output
最初的值为
undefined
，这就是为什么在结果字符串中看到它（在追加之后）。要避免此问题，您可以更改此行：

let输出

为此：

let output=''

或者，您可以执行类似于下面的操作，我使用
map
和
join
而不是附加到自变量。我使用
setTimeout
包装在
Promise
中来模拟
fetch
调用


constulel=document.querySelector（'.vendorDropdown'）；
常量模拟蚀刻=（）=>{
ulEl.innerHTML='正在获取JSON。请稍候..'；
//模拟数据
常量json={
“供应商名称”：[“用户1”、“用户2”、“用户3”]
};
//Promise解析一些JSON数据
返回新承诺（（解决、拒绝）=>{
setTimeout（（）=>resolve（json），1500）；
});
};
document.querySelector（'button'）。addEventListener（'click'，（）=>{
simulateFetch（）。然后（json=>{
//创建HTML并将其附加到ul
const liEls=json['vendor_name'].map（vendor=>`
${vendor}
`）；
ulEl.innerHTML=liEls.join（“”）
})
.catch（err=>console.error（err））；
});

下拉示例


let output
是
let output=undefined
所以你给undefined添加了一个字符串……为什么你要用map作为forEach？初始化
输出
变量。
let output
是
let output=undefined
所以你给undefined添加了一个字符串……为什么你要用map作为forEach？初始化
输出
变量
<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