JSON-Builder

Visually create, explore or modify JSON payloads. This tool provides a way to safely change a particular value within a saved JSON file without needing a text editor. Used to quickly iterate on some content within this book (from which examples below are taken).

Screenshot

Modify Data

Preview Data

Importing / Modifying JSON

Expects two pices of infomration: a JSON payload, and a defined schema

1 of 2 : JSON Data for Import

Expects a JSON document with an array of objects stored under a key. The structure should match the following format and a unique "id" field of type Integer or String is recommended:

{
  "<global_key>" : [
    {"id": "1", "name": "first item!", ... },
    {"id": "2", "name": "second item!", ... },
    {"id": "3", "name": "third item!", ... },
    {"id": "4", "name": "forth item!", ... }
  ]
}

Keys should not contain dashes ('-') as this is used internally for nesting representation. Values may themselves be nested objects. If a second top level key is given, underneath global_key (at the same level), the first key will be used by default. Otherwise the desired key to use can be set in the UI under the Data Key input.

JSON Data for Import - Example

{
  "recipes": [
    {
      "name": "Animals",
      "id": "1",
      "type": "indoor",
      "camera": {
        "mode": "Aperture, Program; Manual if using flash",
        "aperture setting": "f/5.6 - f/8",
        "iso": "200 - 800 ISO",
        "white balance": "",
        "shutter mode": "Continuous",
        "shutter speed": "If manual: 1/30th or faster",
        "focus points": "One focus point/area, selected by you",
        "focus mode": "If animal moves: AI Servo/AF-C",
        "flash compensation": "",
        "metering": "Evaluative/3D Color Matrix",
        "drive": "",
        "exposure compensation": "",
        "mount": ""
      },
      "lens": {
        "focal length": "Between 35 and 135 mm",
        "min. lens aperture": "Fast (Low \"F-number\"), just in case",
        "examples": [
          "24-70 f/2.8 (flexible)",
          "50mm f/1.8 (fast!)"
        ],
        "other": ""
      },
    },
  ]
}

For the moment this file to read data from MUST be titled existing_json_data.json and placed in the top-level-directory of this repo. This will be configurable later.

2 of 2 : JSON Schema

For the moment, JSON documents must be defined in a schema. It is difficult otherwise to infer the schema since objects may be empty.

The schema should follow the structure of the JSON document, defining three types:

• "String" (text data)
• "Text" (Same as above, but will render a <textarea> element to more easily write many sentences)
• [] (an array of elements)
• {} (a subobject with the keys and values defined within - see "camera" below)

Currently integers should simply be saved as strings.

JSON Schema - Example:

{
  "recipes": [
    {
      "name": "String",
      "id": "String",
      "type": "String",
      "camera":{
        "mode": "String",
        "aperture setting": "String",
        "iso": "String",
      },
      "lens":{
        "focal length": "String",
        "examples": [],
      },
      "flash":{
        "type": "String",
        "settings": "String",
      },
      "other": [],
    }
  ]
}

This file must be titled data.json

Note that keys will display in the UI in the order they are listed in the data.json schema.

Building new JSON files

Same steps as above (with defining the schema), however the data import step is clearly not necessary.

Running

$ git clone https://github.com/at1as/json-builder.git
$ cd json-builder
$ npm install

# Create a schema in data.json and 
# For importing data copy JSON data to json-builder/ folder and title it existing_json_data.json

$ npm start

Operations

• Add Page (add a new JSON object at the end of the list – would create an Item 53 in the screenshot above)
• Delete Page (delete the currently displayed page. Will re-index IDs so they are sequential and do no skip numbers)
• Generate (save data to json_output.json)
• Import (import existing data from existing_json_data.json)
• Preview (preview JSON object in HTML table form to quickly get an overview)

Notes

• Generated JSON objects will be stored in the json-builder/ directory with the name json_output.json
• Will save data periodically to generated-backup.json (on 'Add Page' or 'Delete Page' operations). However these backups are not rotated, so on the next such operation, the file will be overwritten. It's meant as a one-operation "undo" for mistakes.

Disclaimer

• Built quickly for a specific task I had in a langauge that's not my first choice. Seems to work, but not exactly code I'm proud of. Tread carefully.

TODO

• Test Schema with array of nested objects (unlikely to work)
• TODO: Add integer / float types
• TODO: Add Enum type (so items can be one of only several defined values)
• Bug: Does not handle second level nesting. Nested objects in arrays are ignored
• Bug: Does not handle second level nesting. Second level nested objects are saved on the top level item
• TODO: Preview does support second level nesting
• TODO: Major code cleanup required
• TODO: Reorder items