Как в реальном времени искать / фильтровать проанализированные данные JSON с помощью Javascript? - PullRequest
0 голосов
/ 05 июня 2018

Я пытаюсь создать поле живого поиска для фильтрации проанализированных данных 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, но я получаю ту же ошибку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...