下拉列表的第一项未定义

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>这是我在下拉值中的最终输出：undefinedUser 1User 2User 3

Answer 1

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

Answer 2

问题是您要附加到名为output. output最初的值为undefined，这就是为什么您会在结果字符串中看到它（在追加之后）。要规避此问题，您可以更改此行：

let output;

对此：

let output = '';

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

const ulEl = document.querySelector('.vendorDropdown');

const simulateFetch = () => {

  ulEl.innerHTML = 'Fetching JSON. Please wait..';

  //Mock data

  const json = {

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

  };

  //Promise resolves some JSON data

  return new Promise((resolve, reject) => {

    setTimeout(() => resolve(json), 1500);

  });

};

document.querySelector('button').addEventListener('click', () => {

  simulateFetch().then(json => {

      //Create the HTML and append it to the ul

      const liEls = json['vendor_name'].map(vendor => `<li>${vendor}</li>`);

      ulEl.innerHTML = liEls.join(' ')

    })

    .catch(err => console.error(err));

});

<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>

Answer 3

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

let output = ""; 会做。