Filtering array of JSON data using multiple controls

Question

I've used bootstrap and jquery to make a nice little mobile app that pulls an array of objects from a URL and create a table of them. Now I have about 5 controls (button groups and dropdowns) that I'd like to use to filter the JSON data. My question is should I use ajax? I'd like to have the filter occur without a page refresh when any of the controls are changed. It's been many years since I've used ajax (back when I developed in .NET) but I know it's built into jquery. Here's my jquery function that builds my table of objects:

$(document).ready(function () {

    var url = "http://json.url/";
    $.getJSON(url, 
        function ( json ) { 
            var tr;
            for (var i = 0; i < json.length; i++) {

                //Create each table row
                tr = $('<tr data-id="' + json[i].id + '" class="tap">');
                tr.append("<td>" + "<span>" + json[i].part_number + "</span>" + "<br>" + 
                                    json[i].diameter + '\"  &raquo; ' + json[i].phases + ' &raquo; ' + 
                                    json[i].voltage + ' &raquo; ' + json[i].rpm);
                tr.append("</td></tr>");
                $('table').append(tr);
             }
    });
});

Would it be better to keep the original array and store it? Or maybe call it every time I click one of the filters? I have 4 bootstrap button groups and and 3 select inputs that I want to use to filter when any or all of them are changed (preferably without a submit button). I'm reading up on jquery.ajax now but wanted to get a question out there because I'm sure I'll need a little assistance.

Answer 1

How could AJAX help you? Does the JSON url allow you to provide params and it will filter the data for you?

If the url you are making the getJSON request does not filter data for you, I think you will have to store the data in an array in javascript, and perform filters on that array based on the values of the options you provide