JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
    
</div>

JavaScript

var a = document.getElementById('a');

var json =
    '{' +
    '    "type": "cow",' +
    '    "sound": "moo",' +
    '    "colors": ["black", "white", "brown"],' +
    '    "feed": {' +
    '		"types": ["hay", "grass"],' +
    '		"consistency": "wet"' +
    '	}' +
    '}';

var parsed = JSON.parse(json);

//called with every property and it's value
function process(key,value) {
   console.log(key + " : " + value);
}

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

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