The Javascript Object

Nov28

I use Javascript Objects quite frequently when I am developing web applications. These objects are very flexible and are easy to create and easy to manipulate. In this post, I will discuss how I use Javascript Objects to store and retrieve application data.

What is a Javascript Object

Javascript Objects are self-contained entities that can contain properties (variables) and methods (functions). I equate a Javascript Object to a multi-dimensional associative array that can have functions (although I rarely create these objects with functions).

To create a basic object, you can use the built-in Object data type.

?View Code JAVASCRIPT
song = new Object;
//add properties
song.title = "Misty Morning";
song.artist = "Bob Marley";
song.album = "Kaya";

To retrieve the properties from a Javascript Object, I simply:

?View Code JAVASCRIPT
alert(song.title);
//will display 'Misty Morning' in the alert box

Adding Multiple Values

Now let’s create a more complex example – one that I use quite often in my web applications. I will store multiple values of a shopping cart order. First the object:

?View Code JAVASCRIPT
var myCart = new Array();
function imCart(id, title, artist, album, quantity, price) { 
        this.id = id;
        this.title = title;
        this.artist = artist;
        this.album = album;
        this.quantity = quantity;
        this.price = price;
}

I created an array ‘myCart’ and I’m storing the item id, title, artist, album, quantity and price in the Javascript Object ‘imCart’. To add items to the cart, I can simply:

?View Code JAVASCRIPT
myCart = new imCart(1, 'Misty Morning', 'Bob Marley', 'Kaya', '3.95');

I can then retrieve the imCart properties:

?View Code JAVASCRIPT
alert(myCart.title);
// will return 'Misty Morning'

To store multiple values from a json object:

?View Code JAVASCRIPT
var songs = [{id: '1', title: 'Misty Morning', artist: 'Bob Marley', album: 'Kaya', quantity: '1': price: '3.95'},
                    {id: '2', title: 'Sing For The Moment', artist: 'Eminem', album: 'The Eminem Show', quantity: '1': price: '3.25'},
                    {id: '3', title: 'Sweetest Goodbye', artist: 'Maroon 5', album: 'Songs About Jane', quantity: '1': price: '3.50'},
                    {id: '4', title: 'Give U My Heart', artist: 'Pieces Of A Dream', album: 'Soul Intent', quantity: '1': price: '3.45'},
                    {id: '5', title: 'Roller Skates', artist: Steel Pulse', album: 'Earth Crisis', quantity: '1': price: '3.95'}];
 
var ln = songs.length;
// loop through each json record
for (var i=0; i<ln; i++) {
      myCart[i] = new imCart(songs[i].id, songs[i].title, songs[i].artist, songs[i].album, songs[i].quantity, songs[i].price); 
}

Now if I wanted to retrieve the song title from the 3rd record in the myCart array:

?View Code JAVASCRIPT
alert(myCart[2].title);

The values in the Javascript Object will remain in memory for as long as the user remains on the page. These objects are very flexible, but overuse of them may cause your application to respond slowly – especially on computers with a limited amount of memory. Enjoy.

Share