browse by category or date

In my recent post about JSON Table Editor, I listed reading CSV under feature to-do list. Working on it, I remember that I have blogged about reading CSV in the past.

So I ported the code from C# to JavaScript. The porting process is very much painless since C# and JavaScript has the same dialect. The JavaScript implementation is much simpler compared to C# because JavaScript is a dynamic language. You can compare the code side by side if you think I bluffed you :D.

Please understand that I wrote the C# implementation way back when I was only have Visual Studio 2005 in my workstation. So sadly, no anonymous object for me that time.

You could argue why complicated method is being used instead of just splitting the string using comma, but simple splitting won’t work when the CSV contains comma inside brackets.

Anyway, enjoy the code and have fun coding.

Cheers!

01.var CsvDataSource = {
02.   cleanQuotes : function (raw) {
03.    //Remove extra quotes/spaces in the beginning and end of string
04.    //Parse the string into Boolean or Number
05.      var str = raw;
06.      while (str.charAt(0) == '"' && str.charAt(str.length - 1) == '"')
07.         str = str.substr(1, str.length - 2);
08.          
09.      if (str.trim)
10.        str = str.trim();
11.         
12.      if (str == "true")
13.         return true;
14.      else if (str == "false")
15.         return false;
16.      else if (Number(str))
17.         return Number(str);
18.      else
19.         return str;
20.   },
21.   csvSplits : function (data, separatorChar) {
22.      //Split a string using the specified separator character. Will keep value between quotes
23.      //as a single value
24.      var me = CsvDataSource;
25.      var result = [];
26.      var lastpost = 0;
27.      var insideQuote = false;
28.      for (var i = 0; i < data.length; i++) {
29.         if (data.charAt(i) == separatorChar) {
30.            if (!insideQuote) {
31.               var str = me.cleanQuotes(data.substr(lastpost, i - lastpost));
32.                
33.               result.push(str);
34.               lastpost = i + 1;
35.            }
36.             
37.            if (i > 0 && i < data.length - 1) {
38.               if (data.charAt(i - 1) == '"' && insideQuote) {
39.                  var str = me.cleanQuotes(data.substr(lastpost, i - lastpost));
40.                  result.push(str);
41.                  lastpost = i + 1;
42.                  insideQuote = false;
43.               }
44.               if (data.charAt(i + 1) == '"' && !insideQuote)
45.                  insideQuote = true;
46.            }
47.         }
48.      }
49.      result.push(me.cleanQuotes(data.substr(lastpost)));
50.      return result;
51.   },
52.   readCSV : function (rawText, separatorChar) {
53.      var result = [];
54.      var lines = rawText.split('\n');
55.      for (var i = 0; i < lines.length; i++) {
56.         var line = lines[i];
57.         if (Ext.String.trim(line) != '') {
58.            var values = this.csvSplits(line, separatorChar);
59.            result.push(values);
60.         }
61.      }
62.      return result;
63.   }
64.}

Update 8th Feb 2013

  • Removed the opening and closing quotes in CSV values
  • Try to convert the String value into Boolean or Number, if failed, remains as a String
VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Possibly relevant:

With so many JSON Editor tools available online, I still can’t find a decent editor with Grid interface.

So I decided to create my own. Considering my sloppy Sencha ExtJS knowledge, I conclude it should not be that difficult to implement with ExtJS. As a bonus, I can get my hand dirty with ExtJS 4.

Lo, and behold: JSON Table Editor.

json-table-editor

Features (previously was To-Do List)

  1. Ability to paste from HTML table/Excel Limited to WebKit browsers. Completed on 12nd Feb 2013
  2. Auto save Completed on 5th Feb 2013
  3. Duplicates a row Completed on 5th Feb 2013
  4. Deletes rows Completed on 5th Feb 2013
  5. Loads remote JSON Completed on 5th Feb 2013
  6. Loads CSV Completed on 5th Feb 2013
  7. Load JSON nested object-array Completed on 22nd Feb 2013
  8. Full support on Unicode characters Completed on 15 Apr 2016

How to Use JSON Table Editor

  1. Editing JSON/CSV
  2. Editing Remote JSON/CSV
  3. Paste values from HTML/Excel
  4. Editing complex JSON object
    Complex object here is referring to any other JavaScript type that is not Number, Boolean, String and Date. Imagine you have the following JSON that you want to edit (using John Bevilaqua‘s data)

    01.{
    02.   'nodes' : {
    03.      'grm155r61a105ke15d' : {
    04.         'requests' : [{
    05.               'id' : '8985DEED-F7FA-4985-A709-2795BCB6A134',
    06.               'name' : 'GRM155R61A105KE15D',
    07.               'request' : {
    08.                  'protocol' : 'HTTP',
    09.                  'method' : {
    10.                     'name' : 'GET',
    11.                     'request-body' : false
    12.                  },
    13.                  'url' : 'www.findchips.com/ref/GRM155R61A105KE15D',
    14.                  'body-type' : 'Text',
    15.                  'headers-type' : 'Form',
    16.                  'url-assist' : false
    17.               },
    18.               'modified' : 'Wed, 27 Feb 2013 13:57:59 -0500'
    19.            }, {
    20.               'id' : '505AFB4F-9311-4261-B33B-8806B3325B6E',
    21.               'name' : 'GRM155R61A105KE15D oemstrade',
    22.               'request' : {
    23.                  'protocol' : 'HTTP',
    24.                  'method' : {
    25.                     'name' : 'GET',
    26.                     'request-body' : false
    27.                  },
    28.                  'url' : 'oemstrade.com/search/GRM31CR61E106KA12L/',
    29.                  'body-type' : 'Text',
    30.                  'headers-type' : 'Form',
    31.                  'url-assist' : false
    32.               },
    33.               'modified' : 'Wed, 27 Feb 2013 14:52:04 -0500'
    34.            }, {
    35.               'id' : 'D916947E-DA7C-4D73-8F67-91BF826E8A92',
    36.               'name' : 'GRM155R61A105KE15D EEM.COM',
    37.               'request' : {
    38.                  'protocol' : 'HTTP',
    39.                  'method' : {
    40.                     'name' : 'GET',
    41.                     'request-body' : false
    42.                  },
    43.                  'url' : 'www.eem.com/search/GRM155R61A105KE15D',
    44.                  'body-type' : 'Text',
    45.                  'headers-type' : 'Form',
    46.                  'url-assist' : false
    47.               },
    48.               'modified' : 'Wed, 27 Feb 2013 14:58:35 -0500'
    49.            }
    50.         ]
    51.      }
    52.   },
    53.   'version' : 1,
    54.   'modified' : 'Wed, 27 Feb 2013 14:58:35 -0500'
    55.}
    1. Any complex object will shown as Grid (Grid icon) in the table
    2. Clicking the Grid icon will open a new page where each object’s property will be used as column
    3. You can check at which level you are from the Window’s title. Any child window will have “child-” in its title.
    4. If you edit anything in a child window, the changes will be reflected to its parent only after you clicked the “Save to Upper Level” button.
    5. If you decided to close the window before saving, a dialog will ask for your confirmation.

Feature Request

  1. Elijahu : Loading non-linear JSON (each record has different field). Completed on 27th Dec 2013 link
  2. Will Baumbach: Should be able to fetch JSON stored in location which use self-signed certificate
  3. Joe Garfield: Can’t import larger datasets. Unclear how to change data types of columns
  4. Carlin Scott: Export to Excel
  5. Konstantin Portnov: When handling unicode, the unicode characters shown as escape characters Completed on 15 Apr 2016 link

Do you have any other suggestions of functionality that would improve JSON Table Editor? Did you spot any bugs?

VN:F [1.9.22_1171]
Rating: 4.4/5 (9 votes cast)

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Possibly relevant:

I previously created a post about this topic using YUI. But now that I’ve completed many projects using Ext.NET/Sencha ExtJS, I feel I can complete the same thing faster and simpler using ExtJS.

Compared to the YUI version, the ExtJS version is better because we can do filtering on each column. The code also much cleaner in ExtJS version.

I also updated the data. I removed codaset because they no longer online. I also added a new favourite of mine, BitBucket.

I hope it’s useful 🙂

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Possibly relevant: