The Blog / Development / Arrays and Objects in Javascript

Arrays and Objects in Javascript

18 Jan 2010

When working with Arrays there are normally a few tasks that you tend to repeat and the functions are not that evident from the names alone. I created a helper object which allows you to convert a JSON string to objects and store them into a array.

To keep things simple I decided to name the object arrayHelper, the methods that this object would have are init, add, update, replace. move and remove. These are the day to day functions you would use on a array.

var arrayHelper = { 
	myArray: [], 
	init: function(initString) { }, 
	// Add items to the array 
	add: function(item) { }, 
	// Update a single item in array Object 
	update: function(index, property, value) { }, 
	// Replace items to the array 
	replace: function(index, item) { }, 
	// Move item around in array 
	move: function(indexFrom, indexTo) { }, 
	// Remove items from the array 
	remove: function(index) { } 
}

So this is what our initial helper object should look like, we pass properties to the each method within the arrayHelper (object), we have a property created called myArray with its value being a array, we will use this to store all our array information and it will be accessible by all methods.

In the first method we pass a param initString which would hold the JSON string information that should be loaded into the array, lets write some more code for this method

init: function(initString) {
	this.myArray = eval('(' + initString + ')'); 
}

Here we are using the eval function to convert the JSON string into objects which then gets loaded into the array property (myArray). New we want to write the code for the add method

add: function(item) { 
	return this.myArray.unshift(eval('('+item+')')); 
},

I decided to use the unshift array function since I wanted all new objects added to be at the beginning of the array, but you can use the push function if you would like it to be removed from the end or you could write a if else logic statement to add to beginning/end, inside of this we add the eval function to convert JSON string to object.

The rest of the object is self explanatory except for the move method which uses the splice array function, the splice array function allows you to remove and replace nodes in the array.

Here is the completed code:

var arrayHelper = { 
	myArray: [], 
	init: function(initString) { 
		this.myArray = eval('(' + initString + ')'); 
	}, 
	// Add items to the array 
	add: function(item) { 
		return this.myArray.unshift(item); 
	}, 
	// Update a single item in array Object 
	update: function(index, property, value) { 
		return this.myArray[index][property] = value; 
	}, 
	// Replace items to the array 
	replace: function(index, item) { 
		return this.myArray.splice(index, 1, item); 
	}, 
	// Move item around in array 
	move: function(indexFrom, indexTo) { 
		var tmp = this.myArray.splice(indexFrom, 1);
		return this.myArray.splice(indexTo, 0, tmp[0]);
	}, 
	// Remove items from the array
	remove: function(index) {
		return this.myArray.splice(index, 1);
	}
}

You can use this and extend it to include other functions if you wish to add them in, it is also easy to convert this back to JSON by using the stringify function in the JSON javascript library.

Social Media

Twitter
London Midland Train Square Bob Sponge Pants at o2 Arena The Reliable