Untitled

<body>
<ul id="container">
</ul>

<script>

    var data = {
      "Fish": {
        "Fish1": {},
        "Fish2": {}
      },

      "Tree": {
        "Tree1": {
          "Tree1_1": {},
          "Tree1_2": {}
        },
        "Tree2": {
          "Tree2_1": {},
          "Tree2_2": {}
        }
      }
    };


function makeTree(container, obj) {
    container.appendChild(createTree(obj));
}

function createTree(obj) {

    var ul = document.createElement('ul');

    for (var key in obj) {

        var li = document.createElement('li');
        li.innerHTML = key;


        var stackLi = createTree(obj[key]); // recursion to get the deep objects
        if (stackLi) li.appendChild(stackLi);

        ul.appendChild(li);
    }

    return ul;
}

var container = document.getElementById('container');
createTree(container, data); //

</script>

</body>