Mapping an object and then setting innerHTML on the page results in commas between items

Question

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

Answer 1

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.

Sample

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>