I want to load json data from js file (url:'myTurorials.json' throwing error so I used .js,)
Please give me solution, thanks in advance.
code from 'myTurorials.js' file is as bellow
`[
{"display": "JavaScript Tutorial", "url":"http://www.w3schools.com/js/default.asp"},
{"display": "HTML Tutorial", "url":"http://www.w3schools.com/html/default.asp"},
{"display": "CSS Tutorial", "url": "http://www.w3schools.com/css/default.asp"}
]`
code from 'myTurorials.js' ends here
$(document).ready(function(){
$.ajax({
type : 'GET',
url : 'myTutorials.js',
dataType : 'json',
contentType : 'application/json',
success: function (response) {
alert('success');
},
error : function(){
alert('error');
},
complete : function(){
//init();
}
});
});
function init(){
myFunction(myArray);
}
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML5 responsive website tutorial</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'/>
<script>
</script>
<style>
</style>
<!-- my files -->
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="id01"></div>
</body>
</html>
</div>