JSFiddle - React, Tailwind, and code Playground

by Vico Bertogli III

HTML

<script src="http://code.jquery.com/jquery-2.1.4.js"></script>

JavaScript

var data = {
	json: JSON.stringify({
		"name": "one!",
		"size": 12,
		"userSize": false,
		"rows":[
			{
				"name": "two!",
				"size": 12,
				"userSize": false,
				"columns": [
					{
						"name": "three!",
						"size": 12,
						"userSize": false,
						"properties": {
							"border-color": "cyan",
							"border-style": "dashed",
							"border-width": "5px"
						},
						"components":[
							{
								"name":"four!"
							}
						]
					}
				]
			}
		]
	})
};

function addLogToDom(label, result) {
	var startTemplate = '<div style="background-color:white;padding:5px; border-bottom:1px #333 solid; margin:5px;">';
	var endTemplate = '</div>';
	console.log(label, result);
	if (typeof result === "object" && result !== null) {
		result = JSON.stringify(result);
	}
	label = "<strong style='font-weight:bold;'>" + label + "</strong>";
	$('body').append(startTemplate + label + ' - ' + result + endTemplate);
}

$(document).ready(function() {
	console.group("ResponseJSON - ResponseText");
	var ajaxRequest = $.ajax({
        url: "/echo/json/",
        data: data,
        type: "POST",
        dataType: 'json'
	});

	ajaxRequest.complete(function(request) {
		$('body').css('background-color', 'green');
		var ourParse = $.parseJSON(request.responseText);
		addLogToDom('Request Object', request);
		addLogToDom('Unparsed responseText', request.responseText);
		addLogToDom('Untouched responseJSON', request.responseJSON);
		addLogToDom('Parsed responseText properties', ourParse.rows[0].columns[0].properties);
		addLogToDom('Unoutched responseJSON properties',  request.responseJSON.rows[0].columns[0].properties);
	});

	console.groupEnd();
});