Reputation: 12985
I have a simple HTML page which loads jquery 3.3.1 and external script file script.js. I am running a simple node http-server which serves the static page. data.json in also in at same folder of HTML file. But when below ajax call is done, I can see request is successful in network call but, success call back of ajax call is never getting called. why?
$( document ).ready(function() {
// Get data from json file
$.ajax({
url: 'data.json',
dataType: 'json',
success: function (data) {
console.log(data);
},
error: function (xhr) {
alert('Error: ' + xhr.statusText);
}
});
});
<html>
<head>
<title>BW Chart</title>
<script src="jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
I can see it's calling error function but why even on status 200 its calling error function
data.json
[{name:"Object 1",
hot:12,
warm:5,
cold:56,
pHot:85,
pWarm:52,
pCold:25
},{name:"Object 2",
hot:14,
warm:55,
cold:23,
pHot:89,
pWarm:14,
pCold:56
},{name:"Object 3",
hot:56,
warm:45,
cold:26,
pHot:85,
pWarm:41,
pCold:36
},{name:"Object 4",
hot:15,
warm:56,
cold:47,
pHot:25,
pWarm:28,
pCold:19
},{name:"Object 5",
hot:18,
warm:52,
cold:12,
pHot:46,
pWarm:52,
pCold:73
}]
Upvotes: 2
Views: 2746
Reputation: 808
Your script.js
looks fine, no errors there. But your success
method, of jQuery Ajax call, will fail to execute if browser fails to parse JSON. Make sure your data.json
is a valid JSON and does not contain any syntax errors...
For example in JSON file, all property names should be double quoted.
Upvotes: 4