3

Overview

I am currently faced with a situation involving scientific data with numerous one-to-many relations. The user base would like to be able to submit the data for import via a Microsoft Excel file. Obviously, this is quite difficult to pin down using Excel, especially when dealing with many relations. Additionally, relying on an Excel format is somewhat more prone to errors.

JSON, on the other hand, is well suited in formatting the data in an infinitely hierarchal manner. This makes it relatively trivial in parsing and importing data into a database.

Question

So, does anyone know if there is any such thing as a JSON Builder? Like, something where an end-user can hit a UI to manually enter data, complete with hierarchal capabilities.

I could imagine feeding the "tool" with configurations... such as a schema, complete with data types, all of the one-to-many instances, and relational bindings. Then, end users would enter data accordingly.

I could build an interface, but I'm trying to determine if there is anything out there which would fit the bill before I even consider going down that road.

The figure below is a hypothetical example of "one-to-many" where "UserWorkHistory" is the "many".

Hypothetical example of one-to-many where UserWorkHistory is the many

Gor
  • 505
  • 1
  • 6
  • 18
  • 1
    What about this? http://jsoneditoronline.org/ (or is that too lightweight?) – adaam May 16 '13 at 00:11
  • @adaam Not quite. Think regular non-technical user, form fields, ease of use. But thank you :) – Gor May 16 '13 at 00:19
  • 1
    I've found a treasure chest: http://stackoverflow.com/questions/998832/gui-based-or-web-based-json-editor-that-works-like-property-explorer – adaam May 16 '13 at 00:23
  • 1
    I think the JSON Schema forms section of the answer is of particular interest to you (https://github.com/joshfire/jsonform - that's compatible with Bootstrap for quick form creation) – adaam May 16 '13 at 00:32
  • @adaam Oh wow! jsonform is it!!! That's the real deal! Thank you so much for your time and willingness to help out! – Gor May 16 '13 at 00:49
  • @adaam, you should "officially" answer my question (as opposed to the comment)... I'll mark yours as the answer, and you'll get some sweet cred. – Gor May 16 '13 at 00:51
  • 1
    Thanks, no worries, glad to help. I'm sure the Bootstrap compatibility will be a big plus when it comes to speedily designing the form page for submitting JSON data. – adaam May 16 '13 at 00:54
  • @adaam, oh yes indeed! good stuff, my friend... – Gor May 16 '13 at 00:55

1 Answers1

2

I've found a treasure trove of JSON-related online editors / visual editors / JSON Schema form frameworks: GUI-based or Web-based JSON editor that works like property explorer

However I believe jsonform (https://github.com/joshfire/jsonform) is most appropriate for you. Here is an example of a basic JSON enabled form:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting started with JSON Form</title>
    <link rel="stylesheet" style="text/css" href="deps/opt/bootstrap.css" />
  </head>
  <body>
    <h1>Getting started with JSON Form</h1>
    <form></form>
    <div id="res" class="alert"></div>
    <script type="text/javascript" src="deps/jquery.min.js"></script>
    <script type="text/javascript" src="deps/underscore.js"></script>
    <script type="text/javascript" src="deps/opt/jsv.js"></script>
    <script type="text/javascript" src="lib/jsonform.js"></script>
    <script type="text/javascript">
      $('form').jsonForm({
        schema: {
          name: {
            type: 'string',
            title: 'Name',
            required: true
          },
          age: {
            type: 'number',
            title: 'Age'
          }
        },
        onSubmit: function (errors, values) {
          if (errors) {
            $('#res').html('<p>I beg your pardon?</p>');
          }
          else {
            $('#res').html('<p>Hello ' + values.name + '.' +
              (values.age ? '<br/>You are ' + values.age + '.' : '') +
              '</p>');
          }
        }
      });
    </script>
  </body>
</html>

Good luck!

Just a footnote, this website will be of use as well: http://json-schema.org/

Community
  • 1
  • 1
adaam
  • 3,700
  • 7
  • 27
  • 51