スキップしてメイン コンテンツに移動

Flatten JSON object to html ul & li items by Javascript

I have written Javascript code snippet which can flatten JSON object to html ul and li items.
Please see this example.

The example demonstrates flattening the following JSON object.
{
   "Name":"Duke",
   "Birth Year": 1876,
   "Skill":{
      "Java":"Wizard (hopefully)",
      "C#":"Master (kidding)",
      "F#":"Beginner (No!)"
    },
   "Favorite":["Violin", "Programming"]
}

Actual Javascript code is something like this:
// original data
var person = {
    "Name":"Duke",
    "Birth Year": 1876,
    "Skill":{
        "Java":"Wizard (hopefully)",
        "C#":"Master (kidding)",
        "F#":"Beginner (No!)"
    },
    "Favorite":["Violin", "Programming"]
}

window.onload = function(){
    try{
        writeAsHtml(person, document.getElementById("test"));
    }
    catch(e){
        alert(e);
    }
};

function writeAsHtml(obj, parent){
    var ul = document.createElement("ul");
    parent.appendChild(ul);
    writeAsHtmlRec(obj, ul, 0);
}            

function writeAsHtmlRec(obj, parent, level){
    for(var key in obj){
        var value = obj[key];
        var li  = document.createElement("li");
        li.className= "level_"+level;
        parent.appendChild(li);
        var type = typeof(value);
        if (type == "object" ){
            li.textContent = key;
            var ul = document.createElement("ul");
            li.appendChild(ul);
            writeAsHtmlRec(value, ul, level+1);
        }
        else{
            setTagValue(li, key +":" + value); 
        }
    }
}

// trivial hadling for browser difference
function setTagValue(element, value){
    if("textContent" in element) { //Check whether element has textContent property
        element.textContent = value;
    }
    else {
        element.innerText = value;
    }
}
BTW.. I would like to try SyntaxHighlighter. (I use prettify now.)

コメント