miguelgonz · August 16, 2016 11:00
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="content-type" content="text/html; charset=utf-8">
 		<title>Find duplicates</title>
 		<script type="text/javascript" charset="utf-8"></script>
 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js"></script>
 		<script type="text/javascript" src="duplicates.js">
 var els;

 function showMessage(message, type) {
 	var el = els.messaging;
 	if (type === undefined) {
 		type = "primary";
 	}
 	el.innerText = message;
 	el.className = "alert alert-" + type;

 	setTimeout(function () {
 		el.classList.add("hidden");
 		el.innerText = '';
 	}, 1500);
 }

 function flattenObjRecursively(obj, prefix) {
 	var output = {};
 	if (prefix === undefined) {
 		prefix = "";
 	} else {
 		prefix += ".";
 	}

 	_.forEach(obj, function (value, key) {
 		if (typeof value === 'object') {
 			results = flattenObjRecursively(value, prefix + key);
 			_.forEach(results, function (value, key) {
 				output[prefix + key] = value;
 			});
 		} else {
 			output[prefix + key] = value;
 		}
 	});
 	return output;
 }

 function processDuplicates(data) {
 	var duplicates = {}, table = "<table class='table table-bordered'>" +
 		"<thead><tr><td>Text</td><td>Keys</td></tr></thead>";

 	data = flattenObjRecursively(data);

 	_.forEach(data, function (value, key) {
 		if (duplicates[value] === undefined) {
 			duplicates[value] = [key];
 		} else {
 			duplicates[value].push(key);
 		}
 	});

 	if (Object.keys(duplicates).length === 0) {
 		els.results.innerHTML = "<div class='alert alert-success'>No duplicates</div>";
 	}

 	_.forEach(duplicates, function (value, key) {
 		var duplicated;
 		if (value.length > 1) {
 			value = value.sort();
 			duplicated = value.map(function (k) { return '<pre>' + k + '</pre>'}).join("");
 			table += "<tr><td>" + key + "</td><td>" + duplicated + "</td></tr>";
 		}
 	});
 	table += "</table>";
 	els.results.innerHTML = table;
 }

 document.addEventListener("DOMContentLoaded", function () {
 	els = {
 		messaging: document.getElementById("messaging"),
 		results: document.getElementById("results"),
 		btnProcess: document.getElementById("btn-process"),
 		source: document.getElementById("source")
 	};

 	els.btnProcess.addEventListener("click", function () {
 		var data;
 		try {
 			data = JSON.parse(source.value);
 			processDuplicates(data);
 		} catch (e) {
 			console.error(e);
 			showMessage("Error parsing JSON", "danger");
 		}
 	});
 });

 		</script>
 		<style type="text/css" media="all">
 #source {
    box-sizing: border-box;
 	font-family: monospace;
    width: 100%;
 }
 		</style>
 	</head>
 	<body>
 		<div class="container">
 			<div id="messaging" class="hidden"></div>
 			<div class="row text-center">
 				<h2>Find duplicates</h2>
 				<button id="btn-process" class="btn btn-large btn-primary">
 						Process <span class="glyphicon glyphicon-cog"></span>
 				</button>
 			</div>
 			<div class="row text-center">
 				<div id="leftcol" class="col-xs-12">
 					<h3>JSON</h3>
 					<textarea rows="10" id="source">{"A": "MOC", "B": "MOC"}</textarea>
 				</div>
 				<div id="rightcol" class="col-xs-12">
 					<h3>Results</h3>
 					<div id="results">
 					</div>
 				</div>
 		</div>
 	</body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Find duplicates</title>
	<script type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js"></script>
	<script type="text/javascript" src="duplicates.js">
	var els;

	function showMessage(message, type) {
	var el = els.messaging;
	if (type === undefined) {
	type = "primary";
	}
	el.innerText = message;
	el.className = "alert alert-" + type;

	setTimeout(function () {
	el.classList.add("hidden");
	el.innerText = '';
	}, 1500);
	}

	function flattenObjRecursively(obj, prefix) {
	var output = {};
	if (prefix === undefined) {
	prefix = "";
	} else {
	prefix += ".";
	}

	_.forEach(obj, function (value, key) {
	if (typeof value === 'object') {
	results = flattenObjRecursively(value, prefix + key);
	_.forEach(results, function (value, key) {
	output[prefix + key] = value;
	});
	} else {
	output[prefix + key] = value;
	}
	});
	return output;
	}

	function processDuplicates(data) {
	var duplicates = {}, table = "<table class='table table-bordered'>" +
	"<thead><tr><td>Text</td><td>Keys</td></tr></thead>";

	data = flattenObjRecursively(data);

	_.forEach(data, function (value, key) {
	if (duplicates[value] === undefined) {
	duplicates[value] = [key];
	} else {
	duplicates[value].push(key);
	}
	});

	if (Object.keys(duplicates).length === 0) {
	els.results.innerHTML = "<div class='alert alert-success'>No duplicates</div>";
	}

	_.forEach(duplicates, function (value, key) {
	var duplicated;
	if (value.length > 1) {
	value = value.sort();
	duplicated = value.map(function (k) { return '<pre>' + k + '</pre>'}).join("");
	table += "<tr><td>" + key + "</td><td>" + duplicated + "</td></tr>";
	}
	});
	table += "</table>";
	els.results.innerHTML = table;
	}

	document.addEventListener("DOMContentLoaded", function () {
	els = {
	messaging: document.getElementById("messaging"),
	results: document.getElementById("results"),
	btnProcess: document.getElementById("btn-process"),
	source: document.getElementById("source")
	};

	els.btnProcess.addEventListener("click", function () {
	var data;
	try {
	data = JSON.parse(source.value);
	processDuplicates(data);
	} catch (e) {
	console.error(e);
	showMessage("Error parsing JSON", "danger");
	}
	});
	});

	</script>
	<style type="text/css" media="all">
	#source {
	box-sizing: border-box;
	font-family: monospace;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div id="messaging" class="hidden"></div>
	<div class="row text-center">
	<h2>Find duplicates</h2>
	<button id="btn-process" class="btn btn-large btn-primary">
	Process <span class="glyphicon glyphicon-cog"></span>
	</button>
	</div>
	<div class="row text-center">
	<div id="leftcol" class="col-xs-12">
	<h3>JSON</h3>
	<textarea rows="10" id="source">{"A": "MOC", "B": "MOC"}</textarea>
	</div>
	<div id="rightcol" class="col-xs-12">
	<h3>Results</h3>
	<div id="results">
	</div>
	</div>
	</div>
	</body>
	</html>