我正在映射一个对象,以便我可以提取其中的一些项目并在它们周围添加 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);
最佳答案
函数map据我所知正在返回一个数组。尝试将代码更改为:
let filteredCitiesHtml = filteredCities.map((item) => {
return `<li>${item.city} - ${item.state}</li>`;
}).join('');
使用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('');
<h3>Without join</h3>
<ul id="without-join">
</ul>
<h3>With join</h3>
<ul id="with-join">
</ul>
关于javascript - 映射对象然后在页面上设置innerHTML会导致项目之间出现逗号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44062723/