jquery - プロパティ エクスプローラーのように機能する GUI ベースまたは Web ベースの JSON エディター

Question

背景:これはまだ存在しない可能性のあるもののリクエストですが、私は長い間作成するつもりでした。最初に、誰かがそのようなものを見たことがあるかどうか尋ねます。

次のような任意の JSON 構造があるとします。

{
    'title_str':'My Employee List'
    ,'lastmod_str': '2009-June-15'
    ,'employee_table':[
        {'firstname':'john','lastname':'doe','age':'33',}
        ,{'firstname':'jane','lastname':'doe','age':'34',}
        ,{'firstname':'samuel','lastname':'doe','age':'35',}
    ]
}

質問:このような構造を取り、ユーザーが使いやすい GUI でこれを自動的に変更できる Web ベースの JSON エディターはありますか?

例: title と lastmod の両方に 2 つの input-type-text コントロールを表示する自動生成された HTML フォームと、arr_list の 3 つの列と 3 つの行を持つ input-type-text コントロールのテーブルを想像してみてください。または、表の各行の横にある [+][X] をクリックして行を追加します。

大きなアイデア:この背後にある「大きなアイデア」は、ユーザーが任意の (再帰的でない) JSON 構造を指定できるようにし、GUI ベースの対話で構造を編集できるようにすることです (これは、 XML Spy の「XML エディター グリッド ビュー」)。

以下も参照してください。

• ローカルでホストされている JSON API ベースの CMS はありますか?
• https://ux.stackexchange.com/questions/37237/treetable-as-a-flexible-condition-filter-editor
• JSONエディタ
• YAML GUI

更新: (木 2014-07-31 18:31:11)

このクローズド SO 投稿をさらに追跡するために、github リポジトリが作成されました。

• https://github.com/dreftymac/stackoverflow.questions.998832

Answer 1

更新：私自身の質問に答えるために、これまでに私が明らかにしたことを以下に示します。他の誰かが何かを持っているなら、私はまだもっと知りたいと思っています。

• http://knockoutjs.com/documentation/plugins-mapping.html ;; knockoutjs.comいいね
• http://jsonviewer.arianv.com/ ;; オフラインで動作するかわいい最小限のもの
• http://www.alkemis.com/jsonEditor.htm ; これはかなり素敵に見えます
• http://json.bubblemix.net/ JSON構造を視覚化し、インラインで編集して、きれいなJSONにエクスポートし直します。
• http://jsoneditoronline.org/StackOverflowスレッド参加者によって追加された例。ソース：https ：//github.com/josdejong/jsoneditor
• http://jsonmate.com/
• http://jsonviewer.stack.hu/
• mb21.github.io/JSONedit、Angularディレクティブとしてビルド

JSONスキーマに基づく

• https://github.com/json-editor/json-editor
• https://github.com/mozilla-services/react-jsonschema-form
• https://github.com/json-schema-form/angular-schema-form
• https://github.com/joshfire/jsonform
• https://github.com/gitana/alpaca
• https://github.com/marianoguerra/json-edit
• https://github.com/exavolt/onde
• JSONスキーマを生成するためのツール：http ：//www.jsonschema.net
• http://metawidget.org
• Visual JSONエディター、Windowsデスクトップアプリケーション（無料、オープンソース）、 http： //visualjsoneditor.org/

コマーシャル（意図的または暗示的な承認はなく、要件を満たす場合と満たさない場合があります）

• LiquidXML-JSONスキーマエディターグラフィカルJSONスキーマエディターおよびバリデーター。
• http://www.altova.com/download-json-editor.html
• XML ValidatorBuddy -JSONおよびXMLエディターは、JSON構文チェック、構文カラーリング、自動完了、JSONポインター評価、およびJSONスキーマ検証をサポートします。

jQuery

• formbuilderjQueryのドラッグアンドドロップ
• formeo
• shalotelli form_builder

YAML

• Konstellate Reddit Post

関連項目

• グーグルブロック
• ローカルでホストされているJSONAPIベースのCMSはありますか？
• cmsベースのコンセプト;; http://www.webhook.com/
• ツリーベースのウィジェット;; http://mbraak.github.io/jqTree/
• http://mjsarfatti.com/sandbox/nestedSortable/
• http://jsonviewer.codeplex.com/
• http://xmlwebpad.codeplex.com/
• http://tadviewer.com/
• https://studio3t.com/knowledge-base/articles/visual-query-builder/

Answer 2

通常、JSON または YAML 文字列を作成する場合は、まず Perl データ構造を構築し、それに対して単純な変換を実行します。Web フォームなど、Perl データ構造生成の前に UI を配置できます。

構造を JSON に変換するのは非常に簡単です。

use strict;
use warnings;
use JSON::Any;

my $data = { arbitrary structure in here };
my $json_handler = JSON::Any->new(utf8=>1);
my $json_string = $json_handler->objToJson($data);