Я пытаюсь создать поле живого поиска для фильтрации проанализированных данных JSON с помощью Javascript.Данные JSON отображаются именно так, как я хочу, в HTML и CSS, но живая фильтрация не работает.
Я новичок в этом, так что, вероятно, что-то очевидно, но я пытался и не смогнайти ответ в Интернете, и я застрял.У меня проблемы с вызовом данных для фильтрации - по крайней мере, я думаю, что это проблема.
HTML:
<input type="text" placeholder="Search" id="filter_listings"/>
<section>
</section>
Javascript:
var requestURL = 'atf.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'text';
request.send();
request.onload = function() {
var directoryText = request.response;
var directory = JSON.parse(directoryText);
render_listings(directory);
}
var render_listings = function(jsonObj){
var listings = jsonObj['eateries'];
for(var i = 0; i < listings.length; i++) {
// where the html template is rendered & linked to JSON data
var myWrapper = document.createElement('div');
var myHeading = document.createElement('h1');
myHeading.textContent = listings[i].name;
section.appendChild(myWrapper).className = "wrapper";
myWrapper.appendChild(myHeading).className = "heading";
//etc
}
var filterListings = function(event){
keyword = input.value.toLowerCase();
var filtered_listings = listings.filter(function(user){
user = user.toLowerCase();
return user.indexOf(keyword) > -1;
});
render_listings(filtered_listings);
}
// filtering it
input = document.getElementById('filter_listings');
input.addEventListener('keyup', filterListings);
}
В этой строке она разрывается: user = user.toLowerCase();
Консоль говорит, что user.toLowerCase
- это ошибка типа, а не функция.
Я просто не уверен, как связать ее с данными JSON.Я пробовал каталог, jsonObj, закусочные и списки.Я также пытался переместить код фильтра в разные места, ниже цикла listings
for, в функции onload
, но я получаю ту же ошибку.