JSFiddle - React, Tailwind, and code Playground

by mckabue

HTML

<ul id="myList">

</ul>

JavaScript

var o = {
  "firstName": "John",
  "lastName" : "doe",
  "age"      : 26,
  "arr":[1,2,3],
  "address"  : {
    "streetAddress": "naist street",
    "city"         : "Nara",
    "postalCode"   : "630-0192"
  },
  "phoneNumbers": [
    {
      "type"  : "iPhone",
      "number": "0123-4567-8888"
    },
    {
      "type"  : "home",
      "number": "0123-4567-8910"
    }
  ]
};



//called with every property and it's value
function process(key,value,path) {
		var log = 'key: ' +key + ", value: "+value+", path: "+path;
    console.log(log);
    var node = document.createElement("LI");
    var textnode = document.createTextNode(log);
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
}

function traverse(o,path,func) {
    for (var i in o) {
       
        if (o[i] !== null && typeof(o[i])=="object") {
            //going on step down in the object tree!!
            o[i].path = path+'/'+i;
            traverse(o[i],o[i].path,func);
        }else if(i !== 'path'){
         func.apply(this,[i,o[i], path+'/'+i]);  
        }
       
    }
}

//that's all... no magic, no bloated framework
traverse(o,'root',process);