Posted By

penguin999 on 10/12/12

Tagged

javascript json formatter

Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

candicom

JSON Formatter

/ Published in: JavaScript

This function will format a JSON object or string so that it can be displayed within a browser (within a textarea or "pre" styled element).

Example usage: http://jsfiddle.net/q2gnX/

Highlighted TextExpand

// Example usage: http://jsfiddle.net/q2gnX/

var formatJson = function(json, options) {
	var reg = null,
		formatted = '',
		pad = 0,
		PADDING = '    '; // one can also use '\t' or a different number of spaces

// optional settings
	options = options || {};
	// remove newline where '{' or '[' follows ':'
	options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
	// use a space after a colon
	options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
	
	// begin formatting...
	if (typeof json !== 'string') {
		// make sure we start with the JSON as a string
		json = JSON.stringify(json);
	} else {
		// is already a string, so parse and re-stringify in order to remove extra whitespace
		json = JSON.parse(json);
		json = JSON.stringify(json);
	}

// add newline before and after curly braces
	reg = /([\{\}])/g;
	json = json.replace(reg, '\r\n$1\r\n');

// add newline before and after square brackets
	reg = /([\[\]])/g;
	json = json.replace(reg, '\r\n$1\r\n');
	
	// add newline after comma
	reg = /(\,)/g;
	json = json.replace(reg, '$1\r\n');
	
	// remove multiple newlines
	reg = /(\r\n\r\n)/g;
	json = json.replace(reg, '\r\n');
	
	// remove newlines before commas
	reg = /\r\n\,/g;
	json = json.replace(reg, ',');

// optional formatting...
	if (!options.newlineAfterColonIfBeforeBraceOrBracket) {			
		reg = /\:\r\n\{/g;
		json = json.replace(reg, ':{');
		reg = /\:\r\n\[/g;
		json = json.replace(reg, ':[');
	}
	if (options.spaceAfterColon) {			
		reg = /\:/g;
		json = json.replace(reg, ': ');
	}

$.each(json.split('\r\n'), function(index, node) {
		var i = 0,
			indent = 0,
			padding = '';
		
		if (node.match(/\{$/) || node.match(/\[$/)) {
			indent = 1;
		} else if (node.match(/\}/) || node.match(/\]/)) {
			if (pad !== 0) {
				pad -= 1;
			}
		} else {
			indent = 0;
		}
	
		for (i = 0; i < pad; i++) {
			padding += PADDING;
		}
	
		formatted += padding + node + '\r\n';
		pad += indent;
	});
	
	return formatted;
};

Report this snippet Tweet

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Who likes this?

JSON Formatter

Related snippets

Choose a language for easy browsing: