Поиск по данным JSON без AJAX

Question

У меня есть огромный JSON-файл, который я использовал для поиска с использованием JavaScript и AJAX. Я использую живой поиск, чтобы после каждого нажатия клавиши JavaScript просматривал весь документ JSON и возвращал результаты, соответствующие тем, которые находятся в поле поиска.

Проблема в том, что каждый раз, когда я нажимаю клавишу, весь файл JSON запрашивается сервером, и это приводит к тому, что использование данных действительно быстро складывается.

Есть ли способ загрузить весь файл JSON на локальный компьютер, а затем выполнить поиск в преформе?

Я использовал JQuery's $.getJSON() как средство интерпретации файла JSON.

Я хочу решение, которое сводит к минимуму необходимость изменить мой существующий код как можно больше.

Я думаю, что, возможно, копирование JSON в файл HTML будет работать лучше всего, так как все будет загружено после загрузки страницы, и я могу искать ее в HTML. Хотя я не уверен, как это сделать.

Вот что мои данные в формате JSON выглядит следующим образом: (за исключением того, близка к 500 из них)

{"profiles": [ 
{ 
    "first_name": "Robert", 
    "last_name": "Hosking", 
    "img_url": "img/about/profile.jpg", 
    "major": "Computer Science", 
    "cohort": 12, 
    "bio": "eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi", 
    "linkedin": "http://linkedin.com", 
    "home_town": "Rutherfordton, NC", 
    "status": "Student" 
}] 

Вот что моя функция поиска выглядит следующим образом: (есть поле ввода с id="search" в моем HTML)

$('#search').keyup(function() { 
    var searchField = $('#search').val(); 
    var myExp = new RegExp(searchField, "i"); 
    $.getJSON('/profiles.json', function(data){ 
     var result ="" 
     $.each(data.profiles, function(key, val){ 

      var fullName = val.first_name + " " + val.last_name 
      var cohortNum = val.cohort.toString() 
      var cohortName = "cohort " + cohortNum 
      if ((val.first_name.search(myExp) != -1) || 
       (val.last_name.search(myExp) != -1) || 
       (val.major.search(myExp) != -1) || 
       (fullName.search(myExp) != -1)|| 
       (cohortNum.search(myExp) != -1)|| 
       (cohortName.search(myExp) != -1) 
       ){ 
        var template = $('#profile-preview-template').html(); 
        result += Mustache.render(template, val);  
      } 
     }); 
     $('#profile-results').html(result); 
    }); 
}); 

этот бит Mustache.render(template, val) просто передает данные JSON в шаблон JavaScript из библиотеки под названием mustache.js.

Заранее благодарен!

Answer 1

Используйте тот факт, что getJSON является Promise

var someGlobalData = $.getJSON('/profiles.json'); // add this somewhere global 

$('#search').keyup(function() { 
    var searchField = $('#search').val(); 
    var myExp = new RegExp(searchField, "i"); 
    someGlobalData.then(function(data) { // change this one line 
     var result = "" 
     $.each(data.profiles, function(key, val) { 

      var fullName = val.first_name + " " + val.last_name 
      var cohortNum = val.cohort.toString() 
      var cohortName = "cohort " + cohortNum 
      if ((val.first_name.search(myExp) != -1) || 
       (val.last_name.search(myExp) != -1) || 
       (val.major.search(myExp) != -1) || 
       (fullName.search(myExp) != -1) || 
       (cohortNum.search(myExp) != -1) || 
       (cohortName.search(myExp) != -1) 
      ) { 
       var template = $('#profile-preview-template').html(); 
       result += Mustache.render(template, val); 
      } 
     }); 
     $('#profile-results').html(result); 
    }); 
});