by Kevin Schroeder | 9:51 am

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.

Comments

stm

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

Jun 15.2012 | 09:55 am

    kschroeder

     @stm Beats 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.

    Jun 15.2012 | 10:16 am

      Walter Tamboer

       @kschroeder  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.

      Jun 19.2012 | 12:51 pm

Vladas Dirzys

that’s there jslint is helpfull

Jun 16.2012 | 04:05 am

    kschroeder

     @Vladas Dirzys JSLint actually wasn’t giving me an error

    Jun 16.2012 | 04:22 am

      Vladas Dirzys

       @kschroeder that’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’.
          {

      Jun 16.2012 | 04:57 am

      Vladas Dirzys

       @kschroeder that’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

      Jun 16.2012 | 05:03 am

      Vladas Dirzys

       @kschroeder that’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

      Jun 16.2012 | 05:03 am

      Vladas Dirzys

       @kschroeder that’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

      Jun 16.2012 | 05:07 am

Vladas Dirzys

that’s there jslint is helpfull

Jun 16.2012 | 04:05 am

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.