Syntax error unexpected end of json input parsererror

Ситуация: вы пишете скрипт, в котором объявляете новые функции или используете уже встроенные. Вы уверены, что всё правильно, потому что делали так сотни раз в других проектах, но при запуске кода появляется такая ошибка:

❌ Uncaught SyntaxError: Unexpected end of input

Что это значит: браузер ждёт от вас или от кода продолжения ввода параметров или новых значений, но не находит их и падает с ошибкой.

Когда встречается: чаще всего это значит, что вы где-то потеряли закрывающие скобки. Вторая ситуация, более редкая — вы обрабатываете JSON-запрос и вам просто не приходят нужные данные (хотя должны бы). О том, что такое JSON-запросы и ответы, будет в отдельной статье — тема слишком большая и интересная для короткого ответа. Сейчас остановимся на первом варианте.

Что делать с ошибкой Uncaught SyntaxError: Unexpected end of input

Чтобы отловить и исправить эту ошибку, вам нужно посчитать и сравнить количество открытых и закрытых скобок в программе — как круглых (), так и фигурных {}. Скорее всего, вам не хватает и того, и другого (и точки с запятой после них).

Проще всего такую ошибку найти простым форматированием кода: когда все вложенные команды и параметры сдвигаются вправо табуляцией или пробелами. В этом случае легко найти разрыв в получившейся лесенке кода и добавить туда нужные скобки. Смотрите сами:

$(function () {
  $("#mewlyDiagnosed").hover(function () {
    $("#mewlyDiagnosed").animate({ 'height': '237px', 'top': "-75px" });
  }, function () {
    $("#mewlyDiagnosed").animate({ 'height': '162px', 'top': "0px" });
  });

Может показаться, что всё в порядке, но вот как выглядит этот код после форматирования:

$(function () {
  $("#mewlyDiagnosed").hover(function () {
    $("#mewlyDiagnosed").animate({ 'height': '237px', 'top': "-75px" });
  }, function () {
    $("#mewlyDiagnosed").animate({ 'height': '162px', 'top': "0px" });
  });

Сразу видно, что в конце скрипта не хватает строки с )}; — если их не поставить, браузер будет ждать продолжения ввода параметров вызова функции, не дождётся их и выдаст ошибку Uncaught SyntaxError: Unexpected end of input

Попробуйте сами. Найдите ошибку в этом коде:

$(function() {

  $state.on('change', function(ev) {

    if($state.is(':checked')) {

    }else {

  });

Code formatting. Tabs or spaces, semi-colons or no semi-colons. It is a pretty controversial subject to many but it is quite important in some instances. If you are on a team, having a cohesive code format helps code readability among your peers. Even if you work alone, one big benefit of having a good sense of code formatting is to avoid syntactical errors.

JavaScript is pretty open when it comes to code format. There is a wide range of different ways to format your codebase in this language. What can happen if you don’t do it? Well, an example of a simple error that is often caused by code formatting issues is the Unexpected end of input error. How does it work?

The Problem

When JavaScript code is run it uses just in time compilation (JIT) to turn your code into something the computer can do. When this happens your code is read and certain things are expected about the code, for example having matching parentheses. If you received the Unexpected end of input error, odds are you are missing a closing curly brace } so the error is basically saying “you opened the curly brace but the code ended before it was closed”.

Here’s an example:

const writeHelloWorld = () => {
  console.log('hello world')

writeHelloWorld();
Code language: JavaScript (javascript)

As you can see, the code is clearly missing a ending curly brace at the end of the arrow function which causes the error. So how does the code formatting mentioned earlier fit into this? Let’s look at a more real-world example:

const items = ['one', 'two', 'three'];

function parseItems() {
  for (let i = 0; i < items.length; i++) {
    if (items[i]) {
    console.log(items[i])
  }
}

parseItems();
Code language: JavaScript (javascript)

In this example, it is a little less clear where the error is. The indentation is not very consistent so you might not notice that the if statement is actually missing a curly brace after which causes the error.

The Solution

Fortunately this is pretty simple to fix — you can just add your missing curly brace. In the above example:

const items = ["one", "two", "three"];

function parseItems() {
  for (let i = 0; i < items.length; i++) {
    if (items[i]) {
      console.log(items[i]); // indented this line over
    } // added this curly brace
  }
}

parseItems();
Code language: JavaScript (javascript)

It can definitely be challenging to find a missing curly brace. Depending on your code editor of choice, you may be able to configure different colors for each pair of curly brace so it is easier to see which ones match and which ones don’t.

Another approach is to try and avoid these errors from the start. Using formatting tools such as Prettier or linting tools like ESLint can help a lot, at least in my experience.

Unexpected end of JSON input

There’s a chance that you received a similarly named but slightly different error: Unexpected end of JSON input. Rather than simply a missing curly brace, this error often occurs when you are trying to parse a JSON string that is itself missing a curly brace. Here’s an example:

const parseJson = (input) => JSON.parse(input);

const validJson = JSON.stringify({ hello: "world" });

const invalidJson = "{";

console.log(parseJson(validJson)); // prints out a valid object
console.log(parseJson(invalidJson)); // throws an error
Code language: JavaScript (javascript)

This can be simply fixed by ensuring the string you are parsing is valid JSON if you have control over that string. If you don’t, you can wrap the whole thing in a try / catch to be safe. Using the previous example:

const parseJson = (input) => {
  try {
    return JSON.parse(input);
  } catch (error) {
    return "error parsing input";
  }
};
Code language: JavaScript (javascript)

If you add this to the parseJson function, you can now handle invalid JSON strings rather than getting an unexpected runtime error.

Conclusion

Hopefully this helps you see how useful good code formatting can be in your code, whether you work with a team or alone. Let us know if you have any other reasons why formatting can be so useful or how you do it in your own code setup. Thanks for reading!

“SyntaxError: Unexpected end of input” problem often occurs when we miss a closing parenthesis, bracket, or quote. Check out our instructions below to find the best solution that works for you.

• Find more about JS Type of Errors

What causes the error “SyntaxError: Unexpected end of input”?

Reproduce the “SyntaxError: Unexpected end of input” in JavaScript

Let’s take a look at one example:

function hello() {
  console.log('Welcome to LearnShareIt.com');

hello();

In this example, we can easily spot that a parenthesis is missing. Therefore, you will receive the Unexpected end of input error. To make it easier for you to understand, this simply means that the computer is telling you: “Hey man, you opened the parenthesis but forgot to close it.”

Here is another example: 

const obj = JSON.parse('');

When you are trying to parse an empty JSON string with JSON.parse(), it might also lead to getting the Unexpected end of input error. 

Solution 1: Add the missing parenthesis, bracket or quote!

The easiest way to fix this problem is to just add the closing parenthesis, bracket, or quote. 

function hello() {
  console.log('Welcome to LearnShareIt.com');
} 

hello();

Output:

Welcome to LearnShareIt.com

The parenthesis works like a door. If you open it, then you have to close it so that your program will work properly.

Solution 2: Use extensions/tools

We can use solution 1 without any problems for small projects or exercises. But for real-world larger projects, it is not always easy to do so. Let’s take a look at an example: 

const array = [1, 2, 3, 4, 5];

function even(){
  for (let i=0; i<5; i++) {
    if (array[i]%2===0){
      console.log(array[i]);
  }
}

even();

As you can see, the errors are less obvious in this example. Since then, we can use some online JavaScript Syntax Validators found easily on the Internet to help us check the syntax of our code.

Fixed code:

const array = [1, 2, 3, 4, 5];

function even(){
  for (let i=0; i<5; i++) {
    if (array[i]%2===0){
      console.log(array[i]);
    }
  }
}

even();

Output:

2
4

Solution 3: Avoid parsing empty JSON string

Make sure that your string is not empty before parsing.

Summary

The “SyntaxError: Unexpected end of input” error in JavaScript can be caused by various reasons, but the most common one is that we forget a closing parenthesis, bracket, or quote. To make it easier to handle large programs or projects, we can use a JavaScript validator to double-check the syntax.

Maybe you are interested in similar errors:

• ReferenceError: document is not defined
• Unexpected token u in JSON at position 0
• Uncaught SyntaxError: Unexpected token
• Unexpected token o in json at position 1 error in js