How to store data in JSON object

Question

I have data with the following structure:

Unique ID (int) | First Name (string) | Last Name (string) | Pct (double)

A set of the data might look something like this:

1 | John | Hancock | 49.5
2 | John | Hancock | 95.0
3 | Jane | Hancock | 89.5
4 | Jane | Hancock | 73.5
5 | Jane | Hancock | 96.5
6 | Fred | Flintstone | 45.8

What I need is to store this data on the client-side so that it is accessible to the browser and can be manipulated using jQuery.

For example, I have a dropdown (select) on the page that has three values in it:

1) Low Percentile
2) Mid Percentile
3) High Percentile

When the user selects one of the values in the dropdown then I need to be able to select items from my data above that qualify for the selected value. For example, if they select the Low Percentile value then I need to retrieve all of the items from the data that have a percentage less than 60%.

I'm fairly versatile with jQuery, but I've never used it to store anything of this sort for client-side retrieval. Can I somehow store this data in JSON objects on the client-side, which in turn can be selected from and manipulated at will?

Answer 1

So basically:

var javascriptObject = $.parseJSON(jsonString);

var jsonString = JSON.stringify(javascriptObject);

JavaScript is much like any other OOP.

var foo = {}; //NEW Object
foo.bar = 1;
foo.bars = 2;
foo.bar.date = 3;
var jsonString = JSON.stringify(foo);
//jsonString is now a "JSON Object" that holds the data found in object foo.
console.log(jsonString); //To see what it looks like.

However if all of this is for client side usage, just stick with JavaScript objects. No need to convert them to JSON. JSON objects are really for sending data to other sources as they are strings. Usually used in AJAX requests.

EDIT BASED ON COMMENT

$(document).ready(function(){
    var globalObject = {};
    globalObject.foo = 1;
    globalObject.bar = 2;

    $(el).change(function(){
        globalObject.foo = $(this).val();
    });
});