CODEWITHSUNDEEP
jqueryjson
Jagd
Jagd

Reputation: 7307

How to store data in JSON object

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?

Upvotes: 5

Views: 44540

Answers (4)

Leeish
Leeish

Reputation: 5213

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();
    });
});

Upvotes: 2

bozdoz
bozdoz

Reputation: 12860

JSON stands for Javascript Object Notation. If you're familiar with Objects, you should be able to work with it.

For your example, I would probably save the variable as an Array of objects (because it is numbered first). Hopefully you wouldn't mind reassigning the numbers to zero-based increments (0, 1, 2...).

Perhaps you could do something like this instead, if you want to save it client-side:

var data = [
{ fname : "John", lname : "Hancock", value : 49.5 },
{ fname : "John", lname : "Hancock", value : 95.0 }
];

That's just the first two as an example. You could then iterate over the array with a for loop for(var i=0, count = data.length; i < count; i++) , and do something with the data if data[i].value < 60.

jQuery's got a nice function called .each() that you could just as easily use too. Also, you could have the JSON saved in a .json file and called by jQuery.getJSON(), if you have a need for that. Both could be good starts in learning about this.

Upvotes: 2

danludwig
danludwig

Reputation: 47375

While I'm not proud of this answer, it would probably work for your needs. It also does not require a browser to have HTML5 local storage.

<input type="hidden" id="json_data" />

<script type="text/javascript>
    var theData = [
        {
            id: 1,
            firstName: 'John',
            lastName: 'Hancock',
            pct: 49.5
        },
        // other objects
        {
            id: 6,
            firstName: 'Fred',
            lastName: 'Flintstone',
            pct: 45.8
        }
    ];
    var dataAsJsonString = JSON.stringify(theData);
    $('#json_data').val(dataAsJsonString); // store data in hidden field

    // later on...
    var getDataBackOut = $.parseJSON($('#json_data').val());
    // you can now iterate over the array to find what you need
</script>

Upvotes: 1

Tim Lieberman
Tim Lieberman

Reputation: 571

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

Use HTML5 Local storage

Upvotes: 0

Related Questions