<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="application/json" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
th{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font: bold;
text-align: center;
}
td{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
}
</style>
</head>
<body>
<section>
<h1>Json data to HTML table</h1>
<table id="JsonTable" style="table-layout: auto; border: 2px solid black;">
<tr style="border: 1px solid red;">
<th>UserID</th>
<th>ID</th>
<th>Title</th>
<th>Body</th>
</tr>
</table>
<script>
$(document).ready(function(){
$.getJSON("https://jsonplaceholder.typicode.com/posts",function(data){
var task='_';
$.each(data,function(key,value){
task +='<tr>';
task +='<td>'+ value.userId +'</td>';
task +='<td>'+ value.id +'</td>';
task +='<td>'+ value.title +'</td>';
task +='<td>'+ value.body +'</td>';
task +='</tr>';
})
$('#JsonTable').append(task);
})
})
</script>
</section>
</body>enter code here
</html>
What’s the matter I can’t understand. It shows error on the 30th line:
uncaught referenceError :$ is not defined.
I tried finding the solution but still its giving the error. please help what to do. I am a fresher in jQuery
and Ajax
.
2
Answers
type="application/json"
?Maybe because you are including the script with the type "application/json". Try to remove the type attribute on your script tag.