映射对象然后在页面上设置innerHTML会导致项目之间出现逗号

Question

我映射一个对象，以便我可以提取其中的一些项目并在它们周围添加 HTML。然后我将其写入页面。

这是有效的，只是页面每个项目后面都有逗号。我怎样才能删除这些逗号？

const input = document.querySelector('.search-form input');
  const shownResults = document.querySelector('.suggestions');
  let searchQuery = "";


  const updatepage = function (filteredCities) {
    let filteredCitiesHtml = filteredCities.map((item) => {
      return `<li>${item.city} - ${item.state}</li>`;
    });

    shownResults.innerHTML = filteredCitiesHtml;
    console.log(filteredCitiesHtml);
  };

  const filterCities = () => {
    const filteredCities = cities.filter((item)=> {
      if (
        item.state.toLowerCase().includes(searchQuery) ||
        item.city.toLowerCase().includes(searchQuery)
        ) {
        return true;
      }
    });
    updatepage(filteredCities);
  };

  // func to search list for string
  const getSearchQuery = function () {
    searchQuery = input.value.toLowerCase();
    filterCities();
  };

  input.addEventListener('keyup', getSearchQuery);

Answer 1

据我所知，函数map返回一个数组。尝试将您的代码更改为：

let filteredCitiesHtml = filteredCities.map((item) => {
    return `<li>${item.city} - ${item.state}</li>`;
}).join('');

使用join将返回一个字符串。

样本

let filteredCitiesHtml = filteredCities.map((item) => {
    return `<li>${item.city} - ${item.state}</li>`;
}).join('');

var filteredCities = ['San Farancisco', 'San Diego', 'New York', 'New Orleans'];
var listItems = filteredCities.map(function(city){
  return '<li>' + city + '</li>';
})
document.getElementById('without-join').innerHTML = listItems;
document.getElementById('with-join').innerHTML = listItems.join('');