Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ‚̧ ūüíĽ
We are community of people that helps each other.

If you think you have some skills to help others

help someone and become a part of our community - List Q & A

JavaScript - how to format json?

0 contributions
4 points

In this article, we're going to have a look at how to write own function to prettify json.

Writing own function we need to do:

  1. Detect type of object,
  2. Iterate over objects and arrays,
  3. Escape unsafe characters like newlines, backslashes, double quote marks, etc.
  4. Convert values to text and join everything together using idents.

Simple implementation json prettify is presented below.

1. Custom json prettify function example

// ONLINE-RUNNER:browser;

function escapeText(text) {
	var result = '';
	
	for (var i = 0; i < text.length; ++i) {
		var code = text.charCodeAt(i);

		switch (code) {
			case 0x00: // \0 - NULL
			case 0x01: case 0x02: case 0x03: case 0x04:
			case 0x05: case 0x06: case 0x07: case 0x08:
				continue;

			case 0x09: // \t - TABULATOR
				result += '\\t';
				continue;

			case 0x0A: // \n - NEW LINE
				result += '\\n';
				continue;

			case 0x0B: case 0x0C:
				continue;

			case 0x0D: // \r - CARRIAGE RETURN
				result += '\\r';
				continue;

			case 0x0E: case 0x0F: case 0x10: case 0x11:
			case 0x12: case 0x13: case 0x14: case 0x15:
			case 0x16: case 0x17: case 0x18: case 0x19:
			case 0x1A: case 0x1B: case 0x1C: case 0x1D:
			case 0x1E: case 0x1F:
				continue;

            // allowed characters: 0x20 and 0x21

			case 0x22: // " - DOUBLE QUOTATION MARK
				result += '\\"';
				continue;

            // allowed characters: 0x23 - 0x26

			case 0x27: // ' - SINGLE QUOTATION MARK
				result += '\'';
				continue;

            // allowed characters: 0x28 - 0x5B

			case 0x5C: // \ - BACK SLASH
				result += '\\\\';
				continue;

			default:
				result += text[i];
		}
	}
	
	return result;
}

function getType(object) {
	return Object.prototype.toString.call(object);
}

function prettifyArray(array, prefix, indent) {
	let result = '[\n';
  
	for (var i = 0; i < array.length; ++i) {
		var value = prettifyEntry(array[i], prefix + indent, indent);
	
		if (i > 0) {
			result += ',\n'
		}
			
		result += prefix + indent + value;
	}
  
	return result + '\n' + prefix + ']';
}

function prettifyObject(object, prefix, indent) {
	let index = 0;
	let result = '{\n';
	
	for (var key in object) {
		if (object.hasOwnProperty(key)) {
			var name = escapeText(key);
			var value = prettifyEntry(object[key], prefix + indent, indent);
			
			if (index > 0) {
				result += ',\n'
			}

			index += 1;
			result += prefix + indent + '"' + name + '": ' + value;
		}
	}
  
	return result + '\n' + prefix + '}';
}

function prettifyEntry(entry, prefix, indent) {
  	var type = getType(entry);

  	switch(type) {
    	case '[object Array]':
      		return prettifyArray(entry, prefix, indent);

      	case '[object Object]':
      		return prettifyObject(entry, prefix, indent);

    	case '[object Null]':
      		return null;

        case '[object Boolean]':
        case '[object Number]':
        case '[object BigInt]':
          	return entry;

      	case '[object String]':
        	return '"' + escapeText(entry) + '"';

      	default:
        	throw new Error(type + ' type is not permitted in json.');
  }
}

function prettifyJson(json, indent) {
    var entry = JSON.parse(json);

    return prettifyEntry(entry, '', indent || '\t');
}

// Example:

var indent = '    ';

var uglyJson = '{"name":"John","age": 25,"todos":["Lectures","Classes"]}';
var preetyJson = prettifyJson(uglyJson, indent);

console.log(preetyJson);

Note: undefined is not valid json token, this is the reasone why is not included in switch cases.

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more