Web JSON Editor: Create data values in JSON format interactively

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 51 All time: 498 This week: 1Up
Version License JavaScript version Categories
jsoneditor 1.0.0Freely Distributable6AJAX, Data types
Description 

Author

This package can be used to create data values in JSON format interactively.

It provides a Web based user interface to edit data value that will be composed to generate a JSON string that represents that value.

The package can save the edited JSON value to a server by sending an AJAX request to a given URL. An example of server side script to handle saving on the server is provided in PHP.

Picture of Chris Jeffries
Name: Chris Jeffries <contact>
Classes: 2 packages by
Country: United Kingdom
Age: 76
All time rank: 1728 in United Kingdom
Week rank: 6 Up1 in United Kingdom Up

Example

<html> <head> <style> * { font-family:Helvetica,Arial,sans-serif} body {background-color:aaaaaa;} #textarea { border:5px ridge silver; margin-top:10px; background-color:ffffcc; border-radius:10px; overflow:auto; white-space: pre; padding:10px; font-family:MonospaceRegular,monospace; font-size:smaller; height:60%; width:95%; } #form { background-color:FFFFEE; border-radius:10px; padding:5px; margin-top:5px; border:3px outset silver; } dt{ font-weight:bold;} dt::after {content:':';} li, dd{ border-left:1px solid blue; } dl, ol {padding:0px;margin:0px;} img {padding-right:2px;} *.editable { background-color:#ddddee; border:2px inset silver; white-space:pre-wrap; font-family:monospace; border-radius:3px; padding:3px;} button {margin-left:5px;margin-right:5px;} </style> <script src='jsonedit.js'></script> <script src='serverlink.js'></script> <script> let parms = { "server":{ "url":"simpleserver.php" }, "request_parms":{ } }; docLoad(parms) .then(getList) .then(choosequery); /*** * getList(parms) - retrieve data based on a prameter object * * Extracts URL and request parms from a parms object and calls * getData returning the result (a promise) ***/ function getList(parms) { parms.request_parms.action='list'; return getData(parms.server.url, parms.request_parms); } /*** * choosequery - appends a list of items to a pre-existing SELECT * object with the id 'select' * * @param object the result of a query using getData. Contains * the items to go in the list ***/ function choosequery(response) { return new Promise( function (resolve,reject) { let keys = []; response.resultData.forEach(function(k) { keys.push(k.queryName);}); keys.unshift('Select a file to edit'); let lst = document.createElement('select'); lst.id='querynames'; lst.onchange = function (e) { if (e.currentTarget.selectedIndex > 0) { e.currentTarget.xx_lastIndex = e.currentTarget.selectedIndex let request = {"action":"getData", "objectName":e.currentTarget.value}; resolve (getData(parms.server.url, request).then(function (response) {populateEditor(response); })); } else { e.currentTarget.selectedIndex = e.currentTarget.xx_lastIndex ; }}; keys.forEach(function(key){ let opt = document.createElement('option'); opt.innerText = key; lst.appendChild(opt); }); document.getElementById('select').appendChild(lst); }); } /*** * displayError(txt) - display an error message * * @param string the text to be displayed ***/ function displayError(txt) { let color; let msg = txt.errorMessage //let msg = JSON.stringify(txt,undefined,4); if(txt.severity == 0) { blockDisplayMessage(msg, undefined, 120); } else { color=(txt.severity>1)?0:240; blockDisplayMessage(msg, 'https://dev.mysql.com/doc/refman/5.5/en/error-messages-client.html', color); } } /*** * blockDisplayMessage - display a message in a given colour * * @param string txt the message to display * @param string href a URL to go to if the message is clicked * @param int hue the color to use for the display 0=red * 120=green, 240=blue ***/ function blockDisplayMessage(txt, href, color) { if (color == undefined) color = 0; let oMsg = document.getElementById('messageBlock'); //if we already created or user created if(oMsg==undefined) oMsg = createMessageBlock(); //need to create one let oMessageBlockText = oMsg.childNodes[1]; let oCloser = oMsg.childNodes[0]; let cMsg = oMsg.style; let cCloser = oCloser.style; oMessageBlockText.innerText = txt; if(href != undefined) { oMessageBlockText.href = href; oMessageBlockText.title = 'Click to view MySQL error codes (in a new window)'; oMessageBlockText.cursor = 'help'; oMessageBlockText.style.borderBottom = '1px dotted black'; } cMsg.border='3px ridge hsl('+color+',50%,60%)'; cMsg.backgroundColor='hsl('+color+',50%,80%)'; cMsg.color = 'hsl('+color+',50%,30%)'; cCloser.backgroundColor = 'hsl('+color+',50%,60%)'; oMessageBlockText.style.backgroundColor = 'none'; oMessageBlockText.style.color = 'hsl('+color+',100%,20%)'; oMsg.style.display = 'block'; } /*** * createMessageBlock - create a block to display messages in ***/ function createMessageBlock() { //The holding div oMsg = document.createElement('div'); oMsg.addEventListener('click', function(e) { e.target.style.display = 'none'; }); oMsg.id = 'messageBlock'; oBody = document.getElementsByTagName('body')[0]; oBody.appendChild(oMsg); let cMsg = oMsg.style; cMsg.position = 'absolute'; cMsg.top = '-10px'; cMsg.right = '5px'; cMsg.width='50%'; cMsg.height='10%'; cMsg.top='10px'; cMsg.position='fixed'; cMsg.display='none'; cMsg.borderRadius='10px'; cMsg.padding='10px'; cMsg.overflow='auto'; cMsg.opacity='0.8'; //The close button let x = document.createTextNode('x'); let oCloser = document.createElement('div'); oCloser.id = 'closer'; oCloser.appendChild(x); let cCloser = oCloser.style; cCloser.position='absolute'; cCloser.top='-6px'; cCloser.right = '-1px'; cCloser.padding='3px'; cCloser.borderRadius='3px'; cCloser.color='white'; cCloser.cursor='pointer'; oCloser.addEventListener('click', function (e) {e.currentTarget.parentNode.style.display='none';} ); oMsg.appendChild(oCloser); //Holder for the message oMessageBlockText = document.createElement('a') oMessageBlockText.target = '_BLANK'; oMessageBlockText.id = 'messageBlockText'; oMessageBlockText.style.width='85%'; oMsg.appendChild(oMessageBlockText); oMsg.style.display='block'; if(oMessageBlockText == undefined) { oMessageBlockText=document.getElementById('messageBlockText'); oMsg = document.getElementById('messageBlock'); } return oMsg; } function makebuttonbox(dialogueArea, resolve, reject) { let queryName let buttonBox = document.createElement('div'); buttonBox.style.textAlign = 'center'; saveButton = document.createElement('button'); saveButton.type = 'button'; saveButton.innerText = 'Save'; saveButton.name = 'CMD'; saveButton.addEventListener('click', function(e) { oTxt = document.getElementById('queryName'); if(oTxt == undefined) { objectName = document.getElementById('querynames').value; } else { objectName = oTxt.innerText; } getData( parms.server.url, { "action":"putData", "objectData": untransform(dialogueArea).DATA, "objectName":objectName }). then(function(response) {displayError(response);}). catch(function(response) {displayError(response);}); }); buttonBox.appendChild(saveButton); closeButton = document.createElement('button'); closeButton.type = 'button'; closeButton.innerText = 'Close'; closeButton.name = 'CMD'; closeButton.addEventListener('click', function(e) { document.getElementById('form').innerHTML = ''; let mb = document.getElementById('messageBlock') if(mb != undefined) mb.style.display = 'none'; let ls = document.getElementById('querynames') ls.selectedIndex = 0; }); buttonBox.appendChild(closeButton); return buttonBox; } /*** * populateEditor - place data into the dialogue window * * @param object response Data returned from getData ***/ function populateEditor(response) { let pForm = document.getElementById('form'); pForm.innerHTML = ''; let dialogueArea = transform({"DATA":response.resultData}) pForm.appendChild(dialogueArea); pForm.appendChild(makebuttonbox(dialogueArea)); } </script> </head> <body> <h1>JSON File Editor</h1> <div id=select></div> <div id=form></div> </body> </html>

Details

PURPOSE ======== To allow structured editing of JSON data. This version reads and writes text files containing JSON data. SECURITY ======== 1. This system will only update files that already exist. 2. Also it will only look in one directory for files (see FPATH, line 49 of simpleserver.php) 3. You can only save a file you have first read with this program 4. Files that do not contain valid JSON and ONLY valid JSON cannot be opened by this script. There is no other security. Anyone who can access the script can access any files in that directory (provided they contain valid JSON) INSTALLATION ============ Unpack all the files in a directory accessible from your web server. You will need a server running PHP7. It may work with PHP5 but this has not been tested. Make a directory somewhere for holding the JSON files. Your server needs read write access to this folder. Edit the FPATH value on line 49 of simpleserver.php to point to the directory you just created. Make one or more seed files in that directory. Seed files should just contain {}. USE === When you call up the script from your browser (JSONEdit.php) you should get a drop down list of all the files in your JSON directory created above. Select one to start editing it. Your browser needs to be ECMAScript 6 complying. All recent browsers should be but it has only been tested in Chromium Version 63.0.3239.84 (Official Build) Built on Ubuntu , running on LinuxMint 18.1 (64-bit) so far. There are buttons to collapse or expand nodes on the tree; and buttons to add a new leaf node; to add a new branch; and to delete a leaf node or branch. I am not very happy that these buttons are clear, but they all have tooltips, so check the tooltip BEFORE you click one :-) When you are done click the Save button. This will not close the window, so click the Close button too. If you don't want to save, just click the close button without the save button. It is not obvious, but you can edit property names as well as property values. Just double click the property name and edit it. FILES ====== The pack contains the following files simpleserver.php - this is the file that is called file XMLHttp to provide the server side service needed (get, put, list) jsonedit.js - This file contains the code for converting JSON into a DOMElement tree with all the needed behaviours it can be used anywhere you want to place an editable JSON based tree. serverlink.js - provides Promise based services for communicating with the server and waiting on document loaded. JSONEdit.php - is not really a PHP file, just HTML. It uses the other files to create a simple JSON Editor, and provides an example of how to use them. COPYRIGHT ========== You are free to use this code anyway you want. If you find ways to improve it, please do feed it back.

  Files folder image Files (10)  
File Role Description
Accessible without login Image file collapse.png Icon button image
Accessible without login Image file delete.png Icon button image
Accessible without login Image file expand.png Icon button image
Accessible without login Image file insert.png Icon button image
Accessible without login Image file inserttree.png Icon button image
Plain text file jsonedit.js Class Primary library
Accessible without login Plain text file JSONEdit.php Example Example file showing use
Accessible without login Plain text file README Doc. Documentation
Accessible without login Plain text file serverlink.js Aux. JS to promisify XMLHttp
Accessible without login Plain text file simpleserver.php Aux. server for example

 Version Control Unique User Downloads Download Rankings  
 0%
Total:51
This week:0
All time:498
This week:1Up