JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<p id="item">

</p>

</body>

JavaScript

var obj = {};
obj["Name"] = "Tom";
obj.lastName = "David";
obj["children"] = [];

var child1 = {name:"A", lastName:"Dav", age: 20};
var child2 = {name:"B", lastName:"Dav", age: 22};
var child3 = {name:"C", lastName:"Dav", age: 3};
var child4 = {name:"D", lastName:"Dav", age: 2};

obj["children"].push(child1);
obj["children"].push(child2);
child1["children"] = [];
child1["children"].push(child3);
child1["children"].push(child4);

var listName = dfs(obj);

// DFS
function dfs(o){
  var list = "";
  for (var i=0; i<o["children"].length;i++){
    list+=o["children"][i].name +" ";
    if (o["children"][i]["children"])
      list+=dfs(o["children"][i]);
  }  
  return list;
} 

var text = "listName = "+listName;
document.getElementById("item").innerHTML = text;