Question

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

这是我的脚本标签：

<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的方式是创建一个空元素。相反，最好使用空字符串之类的值对其进行初始化，然后添加您的值。

let output = "";可以。

Answer 2

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

Answer 3

问题是您要追加到名为output的变量。 output最初的值为undefined，这就是为什么您在结果字符串中（在追加之后）看到它的原因。要解决此问题，您可以更改以下行：

let output;

对此：

let output = '';

或者，您可以执行与下面类似的操作，其中我使用了map和join而不是附加到自变量。我使用包裹在setTimeout中的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>

下拉列表的第一项未定义

3 个答案: