. Advertisement .
..3..
. Advertisement .
..4..
Uncaught SyntaxError Unexpected end of input must not be any stranger to most JavaScript programmers. Nevertheless, not anyone grasps how to manage such a problem the right way. Wait for no more but dig into our tutorial to get the best out of it!
Why Does The Uncaught SyntaxError: Unexpected End Of Input Error Happen?
There are 3 main reasons that can explain the happening of this error. The list includes:
- Attempting to parse a hollow response with ‘$.parseJSON’ or ‘JSON.parse()’.
The “Uncaught SyntaxError Unexpected end of input” error will likely occur when you use the JSON.parse() function to parse an empty string or an empty answer from your server.
For example:
console.log(JSON.parse(''));
console.log($.parseJSON(''));
- Forgetting a closing bracket, parenthesis, or quote.
This is the most common cause that triggers the system to report errors. As such, failing to remember to place a brace for the ‘if’ statement or the current used function will leave you the problem as seen follows.
For example:
function sum(a, b) {
return a + b;
if (true) {
const arr = ['a', 'b' //
const obj = {name: 'Tom' //
- Retrieving no response or a text/html response from a server and trying to analyze it as JSON.
Such trouble can also occur once your server returns an empty answer and you use JSON.parse to parse it.
How To Resolve The Uncaught SyntaxError: Unexpected End Of Input Error?
Solution #1: Shut your Function
If the issue “Uncaught SyntaxError Unexpected End Of Input” exists since you failed to end the function, then simply shut your Function, and there you got the problem resolved. Look at the following example:
$(function() {
$("#makeHoverEffect").hover(function() {
//Your Code
});
}); // Your Code Misses This Closer
Solution #2: Have a look at the proper code
The second solution in case the error occurs when you try to parse empty JSON is to attempt to parse json with data.
Let’s have a look at the proper code resulted by correcting the above error:
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var jsondata = ['{"Site":"Stechies", "Code":"Jquery"}'];
var jsonarray = JSON.parse(jsondata);
$.each(jsonarray, function(i, field){
$("div").append(field + " ");
});
});
});
</script>
</head>
<body>
<button>Get data</button>
<div></div>
</body></html>
The variable JSONdata has been allocated data in the form of key-value pairs – “Code”: “Jquery”, “Site”: “Stechies”. As a result, when using the JSON.parse() feature to parse, it is not transformed to an empty string, avoiding the Uncaught SyntaxError.
You must enclose the JSON string in single quotes in order to generate an effective string variable as shown below:
let flatJSON = '{"a": "b", "c": 1, "d": {"e": 2}}';
The flat JSON string has to be transformed into a JSON object, it is the requirement of JSON.parse(). The flat JSON string can be passed directly or as a Javascript variable to JSON.parse(). Instead of sending a lengthy flat JSON string, supplying variables is simpler and easier to understand.
JSON.parse('{"a", "b", "c", 1}');
let flatJSON2 = '{"a": "b", "c": 1, "d": {"e": 2}}';
JSON.parse(flatJSON2);
“Reviver” is the name of the second parameter that JSON.parse() accepts as an option. Reviver functions convert JSON data that JSON.parse() cannot handle. Here is an example of a reviver function that manages undefined values:
let flatJSON3 = ‘{“a”: “b”, “c”: 1, “d”: {“e”: 2}}’;
let reviver = function(key, value) {
if(typeof value === 'undefined') { return null; }
;
let parsed = JSON.parse(flatJSON3, reviver);
Conclusion
Above is our in-depth instruction on how to mend the Uncaught SyntaxError Unexpected end of input. Hopefully, this post will be of great help to you somehow. See then!
Read more
→ JavaScript Uncaught Syntaxerror: Invalid Or Unexpected Token
Leave a comment