miguelgonz/index.html

## 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>