JavaScript中向ul添加多个li时仅显示最后一个的问题

你遇到的问题核心是：在forEach循环中每次都会重新赋值markup变量，循环结束后该变量仅保留最后一次循环生成的<li>代码，因此调用insertAdjacentHTML时只会插入最后一个搜索结果的li元素。

下面提供两种可行的解决方法，确保所有搜索结果都能正确渲染：

方法一：累加拼接所有结果 #

在循环外初始化空字符串，循环内不断累加每个<li>的HTML代码，最后一次性插入到ul中：

const getSearch = async function () {
try {
const res = await fetch(
      `http://dataservice.accuweather.com/locations/v1/cities/search?apikey=${apiKey}&q=${inputValue}`
    );
    const data = await res.json();

    // 初始化空字符串，用于累加所有li的HTML代码
    let markup = '';
    const dataArr = Object.entries(data);
    dataArr.forEach(([key, value]) => {
      const city = value.AdministrativeArea.LocalizedName;
      const country = value.Country.LocalizedName;
      const countryCode = value.Country.ID;

      // 累加每个li的代码
      markup += `
      <li class="search-result search-result--${key}">${city}, ${country}, ${countryCode}</li>
      `;
    });

    ul.innerHTML = '';
    ul.insertAdjacentHTML('afterbegin', markup);
  } catch (err) {
    console.error(err);
  }
};

方法二：使用map+join生成完整HTML字符串 #

用map方法遍历数据，返回每个<li>的字符串，再通过join('')将数组拼接成完整的HTML字符串，写法更简洁：

const getSearch = async function () {
try {
const res = await fetch(
      `http://dataservice.accuweather.com/locations/v1/cities/search?apikey=${apiKey}&q=${inputValue}`
    );
    const data = await res.json();

    // 用map生成所有li的数组，再拼接成完整字符串
    const markup = Object.entries(data).map(([key, value]) => {
      const city = value.AdministrativeArea.LocalizedName;
      const country = value.Country.LocalizedName;
      const countryCode = value.Country.ID;

      return `
      <li class="search-result search-result--${key}">${city}, ${country}, ${countryCode}</li>
      `;
    }).join('');

    ul.innerHTML = '';
    ul.insertAdjacentHTML('afterbegin', markup);
  } catch (err) {
    console.error(err);
  }
};

内容的提问来源于stack exchange，提问作者Neelam