JSONファイルをJavascript用にオブジェクト化してみました。
key、value毎に表示したり、for inを利用して両方一緒に表示したりできました。

複雑で読みづらいJSON形式ファイルでも、これを通せば見やすくなりました。

そういえばMIMEをtext/jsonだと思っていたらapp...だったんですね。

html

<!DOCTYPE html>
<html>
<body>
	<form method="post" enctype="multipart/form-data">
		<input type="file" id="file" accept="application/json">
	</form>
	<p id='name'></p>
	<p id='value'></p>
	<p id='name_value'></p>
	<script>


	</script>
</body>
</html>

javascript

window.onload = function() {
	const reader = new FileReader();
	//HTMLを初期化し、新たなファイルを文字列として読込む		
	file.addEventListener('change', function(e) {
		reader.readAsText(e.target.files[0]);
		name.innerHTML = value.innerHTML = name_value.innerHTML = "";
	});
    //ファイルをオブジェクト化して表示
	reader.onload = function(e) {
		var obj = JSON.parse(e.target.result);
		for (var i = 0; i < Object.keys(obj).length; i++) {
			name.innerHTML += Object.keys(obj)[i] + '<br>';
		}
		for (var i = 0; i < Object.values(obj).length; i++) {
			value.innerHTML += Object.values(obj)[i] + '<br>';
		}
		for (key in obj) {
			name_value.innerHTML += key + ' ' + obj[key] + '<br>';
		}
	};
};