在没有AJAX的情况下搜索JSON数据

Search through JSON data without AJAX

本文关键字:搜索 JSON 数据 情况下 AJAX      更新时间:2023-09-26

我有一个巨大的JSON文件,我一直在使用JavaScript和AJAX进行搜索。我正在使用实时搜索,以便在每次按下键后,JavaScript搜索整个JSON文档并返回与搜索字段中的内容匹配的结果。

问题是,每次我按下一个键,整个JSON文件被服务器请求,这导致数据使用量真的很快增加。

是否有一种方法可以将整个JSON文件下载到本地机器,然后对其进行搜索?

我一直使用JQuery的$.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数据从一个名为mustache.js的库馈送到JavaScript模板中。

提前感谢!

使用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);
    });
});