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 mas after each item. How can I remove these mas?

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

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 mas after each item. How can I remove these mas?

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

• javascript
• ecmascript-6

2 Answers 2

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>

mapping returns an array, which is converted to a ma separated string. How about joining the returned array by empty string?

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