CODEWITHSUNDEEP
javascriptjqueryajaxjson
Robert Hosking
Robert Hosking

Reputation: 134

Search through JSON data without AJAX

I have a huge JSON file that I've been using to search through using JavaScript and AJAX. I'm using a live search so that after every keypress, JavaScript searches the entire JSON document and returns the results that match whats in teh search field.

The issue it that every time I press a key, the whole JSON file is requested by the server and this causes the data usage to really add up quickly.

Is there a way to download the whole JSON file to the local machine then preform searches on it?

I've been using JQuery's $.getJSON() as a means of interpreting the JSON file.

I want a solution that minimizes having to change my existing code as much as possible.

I'm thinking that perhaps copying the JSON into the HTML file would work best since it will all be downloaded once the page is loaded and I can search from it within the HTML. Although I'm not sure how to go about this.

Here's what my JSON data looks like: (except there are close to 500 of these)

{"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"
}]

Here's what my search function looks like: (there's an input field with id="search" in my 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);
    });
});

that bit Mustache.render(template, val) simply feeds the JSON data into a JavaScript template from a library called mustache.js.

Thanks in advance!

Upvotes: 1

Views: 751

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

Use the fact that getJSON is a 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);
    });
});

Upvotes: 1

Related Questions