Giter Club home page Giter Club logo

jquery-json-editor's Introduction

jQuery JSON Editor

A jQuery library for editing JSON data.

Documentation

$.fn.jsonEdit(opt_options)

Initializes the JSON editor on selected elements.

Params

  • Object opt_options: An object containing the following fields:
  • data (Object): The input JSON data (default: {}).
  • schema (Object): The JSON data schema. The provided object will be merged with default schema.
  • autoInit (Boolean): If true, the forms will be added by default (default: true).

Return

  • Object The JSON editor object containing:
  • labels (Object): An object with UI elements used for labels.
  • groups (Object): An object with UI elements used for groups.
  • inputs (Object): An object with UI elements used for inputs.
  • container (jQuery): A jQuery object being the container of the JSON editor.
  • createGroup (Function): Creates a form group.

createGroup(field)

Creates a form group and returns the jQuery object.

Params

  • Object field: The field object.

Return

  • jQuery The jQuery object form.

addControls(path)

Adds delete button control.

Params

  • String path: The field path.

add(path, data)

Adds new elements in arrays.

Params

  • String|jQuery path: The path to the field or the jQuery object.
  • Object data: Data to add.

delete(path)

Deletes elements from arrays.

Params

  • jQuery path: The element to be deleted.

getValue(fieldPath)

Returns the value of field.

Params

  • String fieldPath: The path to the value.

Return

  • Anything The value taken from data.

initUi()

Creates the form from JSON data.

getData()

Collects data from form inputs and return the data object.

Return

  • Object The object containing data taken from forms.

How to contribute

  1. File an issue in the repository, using the bug tracker, describing the contribution you'd like to make. This will help us to get you started on the right foot.
  2. Fork the project in your account and create a new branch: your-great-feature.
  3. Commit your changes in that branch. Please see the developer guidelines in CONTRIBUTING.md.
  4. Open a pull request, and reference the initial issue in the pull request message.

License

See the LICENSE file.

jquery-json-editor's People

Contributors

gabipetrovay avatar ionicabizau avatar lucaboieru avatar silviubogan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-json-editor's Issues

We should refactor the array schema

Right now it doesn't allow us any kind of options, since it's an array:

someArray: [
   {
        ...
   }
]

Currently the best idea I have is to have something like:

someArray: {
    type: "array",
    item: {
       /* item schema */
    }
}

@silviubogan Any better ideas?

Add support for other HTML5 input types

The currently unsupported input types from the ones enumerated here are:

  • color
  • datetime
  • datetime-local
  • email
  • file
  • hidden
  • month
  • password
  • radio
  • range
  • tel
  • time
  • url
  • week

I left out search and others because I think they do not fit in a form created with this module.

Unit testing

@IonicaBizau, when this issue will be critical from your point of view, please tell me what unit testing library I should use, because I know that you worked with these. I never did unit tests before but I think it would be useful.

Possible values should be unique

For example:

false
true

Instead of:

false
true
false
false

Not sure when this should be checked, probably in the add possible values form. If the developer passes possible: [false, false, true] we will just render it that way.

Any ideas?

The default value of the <select>s in table footers should be an empty string

The default value of the <select>s, in the fields with multiple possible values, in tables' footer row with the new item controls, is an empty string set here but because of a Chromium bug, the default selected value is not an empty string but the text of the first option in the <select>.

See:

Possible values

{
   schema: {
     age: {
         possible: [1, 2, 3, 4],
         type: "number" // "string", "date" etc
     } 
  }
}

Customizable HTML for array tables

This should add support for representations of arrays other than tables (for example, a tag list like the tags of a question on StackOverflow when editing a question).

Example or Demo of implementation

Looks like a very cool project!

I think having an example of how the plugin is implemented in README.md or a static hosted demo where someone can view the source would go a really long way. Even after reading the docs I am unsure how to use the plugin, and I am not a js newb. I would be happy to open up a PR if you guys provide some guidance on how the plugin is implemented.

Allow editing of fields in arrays

Like in objects (#26), by specifying editableFields: true in the definition of the array or editable: true in the definition of individual fields in an array.

Helper functions

editor.add("path.to.array", data);
editor.delete("path.to.array", ????);

Rewrite the plugin in OOP

Currently, there is a lot of spaghetti code that makes solving bugs and extending the plugin very hard. I started working on this and I am working very hard to finish this as soon as possible.

Reordering items in arrays

Make it possible to reorder elements in arrays.

I suggest adding a new <td> next to the delete button in items, a <td> which will be a drag handler containing three horizontal lines. Or maybe would it be better if each item would have two buttons with up and down arrows?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.