JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

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

//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(obj,process);