JSON parsing error in function return

OK, so I am building out a data-driven Twitter application.  Woo hoo.  One of the things I’m doing is mocking up my JavaScript API and having it return example JSON data to build the UI components.  I do this because while some may argue that you might want to build out your API’s first I believe that the customer experience is the first thing that should be working on.  Figure out the customer experience required and the API’s should follow nicely.  Should.  We’ll see if I’m blowing smoke.

Anyway, so what I was doing was building out my JavaScript object and having the individual functions return JSON data like this

1
2
3
4
5
6
7
8
getSkwawkerByHandle: function(handle) {
  return {
    id_str: "asdfg253gasdga",
    name: "Kevin Schroeder",
    skwawker_id: "2435asdfgdfh",
    screen_name: "kpschrade"
  };
}

Piece of cake, until I kept on having problems with one of my API calls.  The JSON wouldn’t parse in my IDE and I was getting errors like “Uncaught SyntaxError: Unexpected token :”.  Here is a subset of the code I was using.

1
2
3
4
5
6
7
8
getSkwawkStatistics: function(skwawkId) {
  return
    {
      top_skwawkers: [123,1234,12345],
      skwawkers_requested: [123,1234,1234,123456],
      skwawk_timeline: []
    };
}

Can anyone see what is wrong?  I couldn’t for the longest time.  Turns out there is one little dinky thing that JavaScript in Chrome requires.  The start of the JSON encoded data must start on the same line as the “return” keyword.  When I changed the function definition, it worked.

1
2
3
4
5
6
7
getSkwawkStatistics: function(skwawkId) {
  return {
      top_skwawkers: [123,1234,12345],
      skwawkers_requested: [123,1234,1234,123456],
      skwawk_timeline: []
    };
}

Removing the line feed at the end of the return and getting that curly bracket on the same line totally solved my stupid little problem.

Related posts

10 thoughts on “JSON parsing error in function return

  1. stm

    Is that due to the implied semi-colons in JS? 

    1. kschroeder

      [email protected] me.  I just know that when I moved the start of the JSON declaration to the same line as the return keyword that it worked.

      1. Walter Tamboer

        [email protected]  In JavaScript semi colons are optional. So what happens is that the return statement is on one line and is seen as a single statement. The semicolon is added automatically leaving your JSON in no man’s land.
         
        Also see http://www.ecma-international.org/publications/standards/Ecma-262.htm chapter 7.9
         
        Certain ECMAScript statements (empty statement, variable statement, expression statement, do-while statement, continue statement, break statement, return statement, and throw statement) must be terminated with semicolons. Such semicolons may always appear explicitly in the source text. For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.

  2. Vladas Dirzys

    that’s there jslint is helpfull

    1. kschroeder

      [email protected] Dirzys JSLint actually wasn’t giving me an error

      1. Vladas Dirzys

        [email protected]’s weird, because after I ran your code (slightly modified) through JSLint, I got several errors, and some of them pointed out your problem:Expected ‘;’ and instead saw ‘{‘.
            return
        Unreachable ‘{‘ after ‘return’.
            {

      2. Vladas Dirzys

        [email protected]’s weird, because after I ran your code (slightly modified) through JSLint, I got several errors, and some of them pointed out your problem:https://gist.github.com/2940854

      3. Vladas Dirzys

        [email protected]’s weird, because after I ran your code (slightly modified) through JSLint, I got several errors, and some of them pointed out your problem:
        https://gist.github.com/2940854

      4. Vladas Dirzys

        [email protected]’s weird, because after I ran your code (slightly modified) through JSLint, I got several errors, and some of them pointed out your problem: https://gist.github.com/2940854

  3. Vladas Dirzys

    that’s there jslint is helpfull

Leave a Comment