26 Jan, 2012, JohnnyStarr wrote in the 1st comment:
Votes: 0
I'm developing a JSON editor to use as a simple web based OLC. I need something up and running quick
for a friend who will be building soon. I chose JSON because I'm still not certain which one of my
projects will be my actual MUD.

The way this works, is PHP grabs the value of a specified JSON file. It loads the page with the JSON
string. The onload function decodes the JSON string, and calls build_tree(obj, 1);

Here is the JSON file: (just as en example)
"name" : "Aragorn",
"race" : "Human",
"class" : "Ranger",
"weapon" : {
"name" : "Anduril", "title" : "Blade of Gondor", "mods" : ["hp + 1", "ap * hp + 2"]
"level" : 88

Here is my current Javascript:

function display(str) {
document.getElementById("output").innerHTML += str;

function build_tree(obj, depth) {
for (var key in obj) {
if (typeof(obj[key]) == 'object') {
display(spaced(depth) + "<i>" + key + ":</i><br/>");
build_tree(obj[key], depth + 1);
display(spaced(depth) + key + ": " + edit_prop_link(obj[key]) + "<br/>");

function spaced(depth) {
buf = '';
for (var i=1; i < depth; i++)
buf += "& nbsp; & nbsp;"; // spaced so it will display on mudbytes
return buf;

function edit_prop_link(v) {
return "<a href='#'>" + v + "</a>";

So far, the code works fine. Here is the output:

name: Aragorn
race: Human
class: Ranger
name: Anduril
title: Blade of Gondor
0: hp + 1
1: ap * hp + 2
level: 88

So far, nothing happens when you click the value of each field. What I want, is to be able to
change the value onclick; either by an editor window or alert box.

The Problem:
How do you store a reference to the current node value?
I imagine you could wrap the text in a <span> tag, but you would no longer have the proper scope.

It seems I have to register each node with a unique id, or create some type of ancestry string and
reference that.

EG: ancestry_string = "obj.weapon.mods[0]"

Any ideas?
26 Jan, 2012, Runter wrote in the 2nd comment:
Votes: 0
How do you store a reference to the current node value?

Store the reference where? You can't store references to nodes of the dom anywhere but in memory. I've read what you said 3 or 4 times and I can't understand what you're trying to do technically. The problem, it sounds, is actually how do you map and query for relationships between data and the dom. The answer is by id and class attributes. I suggest using jquery.
26 Jan, 2012, JohnnyStarr wrote in the 3rd comment:
Votes: 0
By "store", I meant in the id field of a <span> element.

So, when you click a field, you may edit the actual javascript object or variable in that field.
Once you have made your changes, you rebuild the tree.
26 Jan, 2012, plamzi wrote in the 4th comment:
Votes: 0
You can wrap everything in spans and pop up editables on demand but that is unnecessarily complicated and there's no need for it based on what you're showing. Instead, when you're parsing the JSON from the server, you should be building a simple web form to display to the end user.

For each field, think of what form element would make it easy to modify its value. For freeform text and numbers, you should be showing an input type text, for some elements with a set of predefined values, you'll want to build a dropdown select menu. On/off fields lend themselves to a checkbox.

For each editable field, store some kind of reference in the id or class attribute of the form element to preserve the link between the element and the object being modified in memory. Onchange script will then know what to modify. Onsubmit script will know where to look for different fields to update.

If you offer a "submit" button of some sort, you can hold off on listening for form changes up until the user tries to submit the form. Then you scan the form using the identifiers you placed, and collecting the current values of each form element. If the input is valid, you update your object accordingly and fire it back to the server.

Once submitted, the data is ideally read back from the server, the data object is updated client-side, and the form is then rebuilt with the latest info. This ensures data integrity and shows the end user that their modifications were successful.

This is Web Forms 101. If you didn't already know all of it like the back of your hand, you should be hitting some sites / books on web forms.