 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON Content Example</title>
</head>
<body>
    <button id="loadData">Click me to load JSON data</button>
    <div id="jsonContent"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $("#loadData").click(function() {
            //alert("Button clicked");
            $.getJSON("json.js", function(result){ 
                //console.log(result);
                $.each(result, function(key, value){
                    $("#jsonContent").append("<p>" + key + " : " + value + "</p>");
                });
            });  
        });
    </script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>JSON Content Example</title>
	</head>
	<body>
	<button id="loadData">Click me to load JSON data</button>
	<div id="jsonContent"></div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script>
	$("#loadData").click(function() {
	//alert("Button clicked");
	$.getJSON("json.js", function(result){
	//console.log(result);
	$.each(result, function(key, value){
	$("#jsonContent").append("<p>" + key + " : " + value + "</p>");
	});
	});
	});
	</script>
	</body>
	</html>