ตัวแก้ไข JSON ที่ใช้แบบ GUI หรือบนเว็บที่ทำงานเหมือนกับตัวสำรวจคุณสมบัติ [ปิด]

พื้นหลัง:นี่เป็นคำขอสำหรับบางสิ่งที่อาจยังไม่มี แต่ฉันตั้งใจจะสร้างมันขึ้นมาเป็นเวลานาน ก่อนอื่นฉันจะถามว่ามีใครเห็นอะไรแบบนี้หรือยัง

สมมติว่าคุณมีโครงสร้าง 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',}
    ]
}

คำถาม:มีโปรแกรมแก้ไข JSON บนเว็บที่สามารถใช้โครงสร้างเช่นนี้และอนุญาตให้ผู้ใช้แก้ไขสิ่งนี้ใน GUI ที่ใช้งานง่ายโดยอัตโนมัติหรือไม่

ตัวอย่าง:ลองนึกภาพรูปแบบ HTML ที่สร้างขึ้นโดยอัตโนมัติที่แสดงตัวควบคุมอินพุต -Type-text 2 ตัวสำหรับทั้งชื่อและรุ่นล่าสุดและตารางของตัวควบคุมชนิดข้อความอินพุตที่มีสามคอลัมน์และสามแถวสำหรับ arr_list ... ที่มีความสามารถในการลบ หรือเพิ่มแถวเพิ่มเติมโดยคลิกที่ [+] [X] ถัดจากแต่ละแถวในตาราง

Big Idea: "ความคิดที่ยิ่งใหญ่" ที่อยู่เบื้องหลังสิ่งนี้คือผู้ใช้จะสามารถระบุโครงสร้าง JSON ใด ๆ (ไม่ใช่แบบเรียกซ้ำ) และจากนั้นก็สามารถแก้ไขโครงสร้างด้วยการโต้ตอบกับ GUI (สิ่งนี้จะคล้ายกับ "มุมมองตารางตัวแก้ไข XML" ใน XML Spy)

ดูสิ่งนี้ด้วย:

• มี CMS ที่ใช้ JSON api ซึ่งโฮสต์อยู่ในเครื่องหรือไม่
• /ux/37237/treetable-as-a-flexible-condition-filter-editor

อัปเดต: (พฤหัสบดี 2014-07-31 18:31:11)

ที่เก็บ github ถูกสร้างขึ้นเพื่อติดตามโพสต์ SO ที่ปิดนี้เพิ่มเติม

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

อัปเดต:ในความพยายามที่จะตอบคำถามของฉันเองนี่คือสิ่งที่ฉันสามารถค้นพบได้ หากใครที่นั่นมีบางอย่างฉันก็ยังสนใจที่จะหาข้อมูลเพิ่มเติม

• http://knockoutjs.com/documentation/plugins-mapping.html ;; knockoutjs.com ดี
• http://jsonviewer.arianv.com/ ;; น่ารักน้อยที่สุดที่ใช้งานออฟไลน์
• http://www.alkemis.com/jsonEditor.htm ; อันนี้ดูดีมาก
• http://www.thomasfrank.se/json_editor.html
• http://www.decafbad.com/2005/07/map-test/tree2.html ตัวแก้ไขเค้าร่างไม่ใช่ JSON จริงๆ
• 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สร้างขึ้นเป็นคำสั่งเชิงมุม

ขึ้นอยู่กับ JSON Schema

• https://github.com/jdorn/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 Schemas: http://www.jsonschema.net
• http://metawidget.org
• Visual JSON Editor, แอปพลิเคชัน Windows Desktop (ฟรี, โอเพ่นซอร์ส), http://visualjsoneditor.org/

เชิงพาณิชย์ (ไม่มีการรับรองที่ตั้งใจหรือโดยนัยอาจหรืออาจไม่เป็นไปตามข้อกำหนด)

• Liquid XML - JSON Schema Editorกราฟิกเอดิเตอร์ JSON Schema และเครื่องมือตรวจสอบความถูกต้อง
• http://www.altova.com/download-json-editor.html
• XML ValidatorBuddy - โปรแกรมแก้ไข JSON และ XML รองรับการตรวจสอบไวยากรณ์ JSON, การกำหนดสีไวยากรณ์, การเติมข้อความอัตโนมัติ, การประเมิน JSON Pointer และการตรวจสอบ JSON Schema

jQuery

• formbuilder jQuery ลากและวาง
• formeo
• shalotelli form_builder

YAML

• Konstellate Reddit โพสต์

ดูสิ่งนี้ด้วย

• Google blockly
• มี CMS ที่ใช้ JSON api ซึ่งโฮสต์อยู่ในเครื่องหรือไม่
• แนวคิดที่ใช้ 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/

โดยทั่วไปเมื่อฉันต้องการสร้างสตริง JSON หรือ YAML ฉันจะเริ่มต้นด้วยการสร้างโครงสร้างข้อมูล Perl แล้วเรียกใช้การแปลงอย่างง่าย คุณสามารถใส่ UI ไว้ด้านหน้าของการสร้างโครงสร้างข้อมูล Perl เช่นเว็บฟอร์ม

การแปลงโครงสร้างเป็น 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);