Home » Interview Questions, Javascript & Libraries, PHP/MySQL, Programming Techniques » Pretty Print JSON String with PHP and Javascript

2

While coding, many of us want to see a JSON string printed right in the browser in a readable format for easy debugging. In PHP, I usually convert the JSON string back to an Array and use print_r to print the array which throws readable output in the view-source mode. In some cases we really want to print the JSON string formatted. Use the below methods.

I. If you are using PHP 5.4.0 and above, you can use the json_encode method to print a JSON string formatted.

$jsonString = json_encode($array, JSON_PRETTY_PRINT);
echo $jsonString;

II. For earlier PHP versions

Here is a PHP function which accepts a JSON string and returns the formatted string. It uses 4 spaces for indentation. Change the value of $tab to the number of desired spaces for indent. The second parameter when set to true, returns the output in HTML format so that you can see the formatted JSON string right in the browser. Set it to false when you want to view the string in the source or in a console. This method can be used used for a JSON object of any depth.

<?php
function json_pretty($json, $html = false) {
    $out = ''; $nl = "\n"; $cnt = 0; $tab = 4; $len = strlen($json); $space = ' ';
	if($html) {
		$space = '&nbsp;';
		$nl = '<br/>';
	}
	$k = strlen($space)?strlen($space):1;
	for ($i=0; $i<=$len; $i++) {
		$char = substr($json, $i, 1);
		if($char == '}' || $char == ']') {
			$cnt --;
			$out .= $nl . str_pad('', ($tab * $cnt * $k), $space);
		} else if($char == '{' || $char == '[') {
			$cnt ++;
		}
		$out .= $char;
		if($char == ',' || $char == '{' || $char == '[') {
			$out .= $nl . str_pad('', ($tab * $cnt * $k), $space);
		}
		if($char == ':') {
			$out .= ' ';
		}
	}
	return $out;
}
$arr = array('name'=>'John', 'age'=>19, 'address'=>array(array('city'=>'Nashville', 'country'=>'US')));
$json_string = json_encode($arr);
echo json_pretty($json_string, true); // Pass true as the second parameter to get the output in HTML
?>

III. Using JavaScript

You can use the JSON.stringify method in Javascript to log a JSON object in readable format. Just say:

<script>
var jsonString = JSON.stringify(jsonObject, null, '\n');
console.log(jsonString);
</script>

However if you want to show the JSON string formatted in the HTML in a browser window, use the function below. You can also see how I am passing the data from PHP to JavaScript. The output of json_encode from PHP can be echoed directly to a JS variable which will create a JavaScript Object.

<?php
$arr = array('name'=>'John', 'age'=>19, 'address'=>array(array('city'=>'Nashville', 'country'=>'US')));
?>
<script>
var jsonObj = <?php echo json_encode($arr, JSON_FORCE_OBJECT); ?>;
function json_pretty(json) {
	var jsonString = JSON.stringify(json, null, '_JS_');
	jsonString = jsonString.replace(/\n/g, '<br/>');
	jsonString = jsonString.replace(/_JS_/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
	return jsonString
}
document.write(json_pretty(jsonObj));
</script>

2 Comments

  1. Joseph says:

    Thanks a bunch. This really helped me out

  2. Filipe says:

    Thank you!

Leave a Reply

Page optimized by WP Minify WordPress Plugin