下拉列表的第一项未定义

Question

我在脚本标签中调用外部 JSON 文件。Dropdown 正常呈现 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

您是否尝试初始化output为空字符串 `` 而不是简单地声明它 (henc&nbsp;undefined)？

Answer 2

问题是您要附加到名为output. output最初的值为undefined，这就是为什么您会在结果字符串中看到它（在追加之后）。要规避此问题，您可以更改此行：let output;对此：let output = '';或者，您可以执行类似于下面的操作，其中我使用了mapandjoin而不是附加到自变量。我用setTimeout包裹在 a 中Promise来模拟fetch调用const ulEl = document.querySelector('.vendorDropdown');const simulateFetch = () => {&nbsp; ulEl.innerHTML = 'Fetching JSON. Please wait..';&nbsp; //Mock data&nbsp; const json = {&nbsp; &nbsp; "vendor_name": ["User 1", "User 2", "User 3"]&nbsp; };&nbsp; //Promise resolves some JSON data&nbsp; return new Promise((resolve, reject) => {&nbsp; &nbsp; setTimeout(() => resolve(json), 1500);&nbsp; });};document.querySelector('button').addEventListener('click', () => {&nbsp; simulateFetch().then(json => {&nbsp; &nbsp; &nbsp; //Create the HTML and append it to the ul&nbsp; &nbsp; &nbsp; const liEls = json['vendor_name'].map(vendor => `<li>${vendor}</li>`);&nbsp; &nbsp; &nbsp; ulEl.innerHTML = liEls.join(' ')&nbsp; &nbsp; })&nbsp; &nbsp; .catch(err => console.error(err));});<div class="dropdown">&nbsp; <button class="btn btn-primary dropdown-toggle" type="button" data- toggle="dropdown">Dropdown Example&nbsp; &nbsp; <span class="caret"></span></button>&nbsp; <ul class="dropdown-menu vendorDropdown">&nbsp; </ul></div>

Answer 3

您初始化的方式output是创建一个空元素。相反，最好用空字符串之类的东西初始化它，然后添加您的值。let output = "";&nbsp;会做。