映射对象然后在页面上设置innerHTML会导致项之间出现逗号 [英] Mapping an object and then setting innerHTML on the page results in commas between items

问题描述

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

Im mapping an object so that I can pull out some of its items and add HTML around them. Im then writing this to the page.

这是有效的，除了页面在每个项目后面都有逗号。如何删除这些逗号？

This is working except that the page has commas after each item. How can I remove these commas?

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

推荐答案

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

Function map is returning an array as I know. Try changing your code to:

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

使用加入会返回一个字符串。

Using join will return you a string.

示例

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('');

<h3>Without join</h3>
<ul id="without-join">
</ul>

<h3>With join</h3>
<ul id="with-join">
</ul>

这篇关于映射对象然后在页面上设置innerHTML会导致项之间出现逗号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！