2013
02.05

JSON Table Editor

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
    1. Paste JSON/CSV text in the first textarea. Please note that for CSV, the first line will be used as column name.
    2. Click Load Model button. If failed, please fix the text to follow the correct JSON/CSV format. Note that you could change the default CSV separator character in the narrow textbox before the ‘Load JSON’ button.
    3. Add new record, or edit existing one in the Table Editor grid
    4. Click Output to JSON button to get the final JSON array object
  2. Editing Remote JSON/CSV
    1. Type the URL of JSON/CSV in the textbox below the first text area.
    2. Click Load Model button. If failed, edit the JSON/CSV top text area, clear the URL, then click ‘Load JSON’ button. If you didn’t clear the URL textbox, it will always try retrieve the file and ignore your modified version.
  3. Paste values from HTML/Excel
    1. Currently, the paste action is only available in Chrome, Safari and Opera. For now, only single column values is accepted.
    2. The values will be separated by newline character.
    3. Please ensure you select the appropriate Paste method before pasting.
    4. In Insert mode (Overwrite checkbox is unchecked), multiple copies of the selected row will be inserted below it. The number of copies will depend on the number of pasted values. These row copies will then have their corresponding column updated with the pasted value.
    5. In Overwrite mode , the values of the current cell and any cells below it will replaced. If the number of pasted values exceed the last row, Insert mode will be applied to the last row using the remaining pasted values
    6. To paste values, select the cell. Then press Ctrl+V
  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)

    {
       'nodes' : {
          'grm155r61a105ke15d' : {
             'requests' : [{
                   'id' : '8985DEED-F7FA-4985-A709-2795BCB6A134',
                   'name' : 'GRM155R61A105KE15D',
                   'request' : {
                      'protocol' : 'HTTP',
                      'method' : {
                         'name' : 'GET',
                         'request-body' : false
                      },
                      'url' : 'www.findchips.com/ref/GRM155R61A105KE15D',
                      'body-type' : 'Text',
                      'headers-type' : 'Form',
                      'url-assist' : false
                   },
                   'modified' : 'Wed, 27 Feb 2013 13:57:59 -0500'
                }, {
                   'id' : '505AFB4F-9311-4261-B33B-8806B3325B6E',
                   'name' : 'GRM155R61A105KE15D oemstrade',
                   'request' : {
                      'protocol' : 'HTTP',
                      'method' : {
                         'name' : 'GET',
                         'request-body' : false
                      },
                      'url' : 'oemstrade.com/search/GRM31CR61E106KA12L/',
                      'body-type' : 'Text',
                      'headers-type' : 'Form',
                      'url-assist' : false
                   },
                   'modified' : 'Wed, 27 Feb 2013 14:52:04 -0500'
                }, {
                   'id' : 'D916947E-DA7C-4D73-8F67-91BF826E8A92',
                   'name' : 'GRM155R61A105KE15D EEM.COM',
                   'request' : {
                      'protocol' : 'HTTP',
                      'method' : {
                         'name' : 'GET',
                         'request-body' : false
                      },
                      'url' : 'www.eem.com/search/GRM155R61A105KE15D',
                      'body-type' : 'Text',
                      'headers-type' : 'Form',
                      'url-assist' : false
                   },
                   'modified' : 'Wed, 27 Feb 2013 14:58:35 -0500'
                }
             ]
          }
       },
       'version' : 1,
       'modified' : 'Wed, 27 Feb 2013 14:58:35 -0500'
    }
    
    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

Do you have any suggestions of functionality that would improve JSON Table Editor?

  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

What do you think? Do you have any other features idea, or spot any bugs?

GD Star Rating
loading...
JSON Table Editor, 4.3 out of 5 based on 7 ratings
Worth sharing ?

Incoming Search Term

Advertise Here

4 Trackbacks

 

 

9 comments so far

Add Your Comment
  1. This is great! Can you deploy the capability into a web-based solution, or integrated with a web page?

    Thanks,
    Shane

    • Hi Shane,

      Nothing is impossible :)

  2. Hi, Great tool!! amazing :)
    I am using it to help content editors work on json files for work.
    so they sometimes want to add an image, you think there can be an interface that allows to browse and then add the file name + path?

    and a bug of sorts: when entering a “non linear” json it’s ignores some rows for example if the json file is:

    [
    {
    “name” : “gggg”,
    “desc” : “gggg”
    },
    {
    “text” : “gggg”
    },
    {
    “text” : “gggg”
    },
    {
    “text” : “gggg”
    }
    ]

    I wont see the text column although it’s in the grid (show on altova’s xmlspy)

    Cheers and thanks,

    Elijahu

    • Hi Elijah,

      Cool idea. Will put it in my todo list 😉 Thanks.

  3. CSV or JSON Export would be nice. So you can modify data and later export and save it to your computer.

  4. Great tool…but I found an issue with the following scenario. I loaded input to table editor. Pressed Delete All and closed the editor. When I open it back up, the input is [] and loops. Only way around is to quickly paste something in the input box.

    • Hi Bill,

      Thank you for the bug report. It’s fixed 😀

  5. Should change fields ordering in output json, when it was changed in grid.

    • Your wish is my command 😉 It’s done.