Javascript Object to JSON Function

Coding No Responses »
Jun 202011

Since starting Javascript and especially AJAX, I’ve found myself in a lot of situations where I would have loved to have a Javascript Object/Array to JSON converter, but I never found one. Even in jQuery, which has parseJSON, it didn’t have something that went the other way round.

So I decided to create it myself.
And, as I’ve found myself sending this code around to quite a few developers who’ve asked, I thought I might as well put it up on my blog.

Pretty straight forward, simple pass an object or array into JSONString and it’ll return a JSON String.

function JSONString(object) {
	var jsonString = '';
	var first = true;
	if(typeof(object) != 'object' || object === null || object === undefined) return false;
	if(object.constructor.toString().indexOf("Array") == -1) jsonString += '{'; else jsonString += '[';
	if(object.constructor.toString().indexOf("Array") == -1) {
		for(var idx in object) {
			if(!first) jsonString += ',';
			first = false;
			if(object.constructor.toString().indexOf("Array") == -1){
				if(typeof(idx) == 'string') {
					jsonString += '"' + idx + '"';
				} else {
					jsonString += idx;
				}
				jsonString += ':';
			}
			switch(typeof(object[idx])) {
			case 'number':
				jsonString += object[idx];
				break;
			case 'string':
				jsonString += '"' + object[idx].replace(/"/gi,'\\"') + '"';
				break;
			case 'object':
				jsonString += JSONString(object[idx]);
				break;
			case 'boolean':
				jsonString += ((object[idx])? 'true' : 'false');
				break;
			case 'function':
				jsonString += 'function';
				break;
			}
		}
	}
	else {
		for(var idx = 0; idx < object.length; idx++) {
			if(!first) jsonString += ',';
			first = false;
			switch(typeof(object[idx])) {
			case 'number':
				jsonString += object[idx];
				break;
			case 'string':
				jsonString += '"' + object[idx] + '"';
				break;
			case 'object':
				jsonString += JSONString(object[idx]);
				break;
			case 'boolean':
				jsonString += ((object[idx])? 'true' : 'false');
				break;
			case 'function':
				jsonString += 'function';
				break;
			}
		}	
	}
	if(object.constructor.toString().indexOf("Array") == -1) jsonString += '}'; else jsonString += ']';
	return jsonString.replace(/(\r\n|\n|\r)/gm,"");
}
Posted by sreid at 9:01 pm Tagged with: ,

Removing an element from a Javascript array.

Coding No Responses »
Jun 202011

I was recently doctoring some code originally created by another developer, and found that there was some weird behaviour going on with the arrays in his code.
After doing some more research, I found that the developer was incorrectly deleting elements from arrays, which left holes in them and caused the length property to give out incorrect values.

So the classic javascript array. Declared like this:

var classic = [];
var classic2 = ['This','Is','An','Array'];

Now, say we wanted to remove the element ‘Is’ from classic2, some people may use this method:

delete classic2[1];

however, although it does remove the element, it’ll leave a hole in your array, and the length attribute of your array will stay the same. This is a mistake I’ve found in quite a few code samples.

alert(classic2.length);
delete classic2[1];
alert(classic2.length);

Both alert dialogs will show the same length. This is the wrong way to delete elements from an Array.
Here’s the right way, using the splice function:

alert(classic2.length);
var removed_element = classic2.splice(1,1);
alert(classic2.length);

This way, you see the length attribute working as intended, and splice will move elements after the removed element down one, so the consistency of the array is preserved.
Also, the Splice function returns the element or elements that have been removed from the array, so you can optionally catch that if you have use for it.
In the case that you’re working with a larger array or just generally don’t know the indexes of each element, you can do something like this:

classic2.splice(classic2.indexOf('Is'),1);
Posted by sreid at 8:44 pm Tagged with: ,
© 2012 The Life of a Dev Suffusion theme by Sayontan Sinha