Rendering JSON array as a tree

Question

This code is working fine for me, but I want to simplify it.

Function parents is defining parents of the tree and children function is for representing children. DisplayGraph() function shows the tree in an HTML element.

window.onload = function() {
 arr();
 parents(); 
 };
 var array = [];
 //////////////
 var data = [
 {
 "FIELD1":1,
 "name1":"Al",
 "name2":"Newman",
 "atbat86":185,
 "hits86":37,
 "homer86":1,
 "runs86":23,
 "rbi86":8,
 "walks86":21,
 "years":2,
 "atbat":214,
 "hits":42,
 "homeruns":1,
 "runs":30,
 "rbi":9,
 "walks":24,
 "league86":"N",
 "div86":"E",
 "team86":"Mon",
 "posit86":"2B",
 "outs86":76,
 "assist86":127,
 "error86":7,
 "sal87":"70",
 "league87":"A",
 "team87":"Min"
 },
 {
 "FIELD1":2,
 "name1":"Alan",
 "name2":"Ashby",
 "atbat86":315,
 "hits86":81,
 "homer86":7,
 "runs86":24,
 "rbi86":38,
 "walks86":39,
 "years":14,
 "atbat":3449,
 "hits":835,
 "homeruns":69,
 "runs":321,
 "rbi":414,
 "walks":375,
 "league86":"N",
 "div86":"W",
 "team86":"Hou",
 "posit86":"C",
 "outs86":632,
 "assist86":43,
 "error86":10,
 "sal87":"475",
 "league87":"N",
 "team87":"Hou"
 },
 {
 "FIELD1":3,
 "name1":"Alan",
 "name2":"Trammell",
 "atbat86":574,
 "hits86":159,
 "homer86":21,
 "runs86":107,
 "rbi86":75,
 "walks86":59,
 "years":10,
 "atbat":4631,
 "hits":1300,
 "homeruns":90,
 "runs":702,
 "rbi":504,
 "walks":488,
 "league86":"A",
 "div86":"E",
 "team86":"Det",
 "posit86":"SS",
 "outs86":238,
 "assist86":445,
 "error86":22,
 "sal87":"517.143",
 "league87":"A",
 "team87":"Det"
 },
 {
 "FIELD1":4,
 "name1":"Alan",
 "name2":"Wiggins",
 "atbat86":239,
 "hits86":60,
 "homer86":0,
 "runs86":30,
 "rbi86":11,
 "walks86":22,
 "years":6,
 "atbat":1941,
 "hits":510,
 "homeruns":4,
 "runs":309,
 "rbi":103,
 "walks":207,
 "league86":"A",
 "div86":"E",
 "team86":"Bal",
 "posit86":"2B",
 "outs86":121,
 "assist86":151,
 "error86":6,
 "sal87":"700",
 "league87":"A",
 "team87":"Bal"
 },
 {
 "FIELD1":5,
 "name1":"Alex",
 "name2":"Trevino",
 "atbat86":202,
 "hits86":53,
 "homer86":4,
 "runs86":31,
 "rbi86":26,
 "walks86":27,
 "years":9,
 "atbat":1876,
 "hits":467,
 "homeruns":15,
 "runs":192,
 "rbi":186,
 "walks":161,
 "league86":"N",
 "div86":"W",
 "team86":"LA",
 "posit86":"C",
 "outs86":304,
 "assist86":45,
 "error86":11,
 "sal87":"512.5",
 "league87":"N",
 "team87":"LA"
 },
 {
 "FIELD1":6,
 "name1":"Alfredo",
 "name2":"Griffin",
 "atbat86":594,
 "hits86":169,
 "homer86":4,
 "runs86":74,
 "rbi86":51,
 "walks86":35,
 "years":11,
 "atbat":4408,
 "hits":1133,
 "homeruns":19,
 "runs":501,
 "rbi":336,
 "walks":194,
 "league86":"A",
 "div86":"W",
 "team86":"Oak",
 "posit86":"SS",
 "outs86":282,
 "assist86":421,
 "error86":25,
 "sal87":"750",
 "league87":"A",
 "team87":"Oak"
 },
 {
 "FIELD1":7,
 "name1":"Alvin",
 "name2":"Davis",
 "atbat86":479,
 "hits86":130,
 "homer86":18,
 "runs86":66,
 "rbi86":72,
 "walks86":76,
 "years":3,
 "atbat":1624,
 "hits":457,
 "homeruns":63,
 "runs":224,
 "rbi":266,
 "walks":263,
 "league86":"A",
 "div86":"W",
 "team86":"Sea",
 "posit86":"1B",
 "outs86":880,
 "assist86":82,
 "error86":14,
 "sal87":"480",
 "league87":"A",
 "team87":"Sea"
 },
 {
 "FIELD1":8,
 "name1":"Andre",
 "name2":"Dawson",
 "atbat86":496,
 "hits86":141,
 "homer86":20,
 "runs86":65,
 "rbi86":78,
 "walks86":37,
 "years":11,
 "atbat":5628,
 "hits":1575,
 "homeruns":225,
 "runs":828,
 "rbi":838,
 "walks":354,
 "league86":"N",
 "div86":"E",
 "team86":"Mon",
 "posit86":"RF",
 "outs86":200,
 "assist86":11,
 "error86":3,
 "sal87":"500",
 "league87":"N",
 "team87":"Chi"
 },
 {
 "FIELD1":9,
 "name1":"Andre",
 "name2":"Thornton",
 "atbat86":401,
 "hits86":92,
 "homer86":17,
 "runs86":49,
 "rbi86":66,
 "walks86":65,
 "years":13,
 "atbat":5206,
 "hits":1332,
 "homeruns":253,
 "runs":784,
 "rbi":890,
 "walks":866,
 "league86":"A",
 "div86":"E",
 "team86":"Cle",
 "posit86":"DH",
 "outs86":0,
 "assist86":0,
 "error86":0,
 "sal87":"1100",
 "league87":"A",
 "team87":"Cle"
 },
 {
 "FIELD1":10,
 "name1":"Andres",
 "name2":"Galarraga",
 "atbat86":321,
 "hits86":87,
 "homer86":10,
 "runs86":39,
 "rbi86":42,
 "walks86":30,
 "years":2,
 "atbat":396,
 "hits":101,
 "homeruns":12,
 "runs":48,
 "rbi":46,
 "walks":33,
 "league86":"N",
 "div86":"E",
 "team86":"Mon",
 "posit86":"1B",
 "outs86":805,
 "assist86":40,
 "error86":4,
 "sal87":"91.5",
 "league87":"N",
 "team87":"Mon"
 },
 {
 "FIELD1":11,
 "name1":"Andres",
 "name2":"Thomas",
 "atbat86":323,
 "hits86":81,
 "homer86":6,
 "runs86":26,
 "rbi86":32,
 "walks86":8,
 "years":2,
 "atbat":341,
 "hits":86,
 "homeruns":6,
 "runs":32,
 "rbi":34,
 "walks":8,
 "league86":"N",
 "div86":"W",
 "team86":"Atl",
 "posit86":"SS",
 "outs86":143,
 "assist86":290,
 "error86":19,
 "sal87":"75",
 "league87":"N",
 "team87":"Atl"
 },
 {
 "FIELD1":12,
 "name1":"Andy",
 "name2":"Allanson",
 "atbat86":293,
 "hits86":66,
 "homer86":1,
 "runs86":30,
 "rbi86":29,
 "walks86":14,
 "years":1,
 "atbat":293,
 "hits":66,
 "homeruns":1,
 "runs":30,
 "rbi":29,
 "walks":14,
 "league86":"A",
 "div86":"E",
 "team86":"Cle",
 "posit86":"C",
 "outs86":446,
 "assist86":33,
 "error86":20,
 "sal87":"NA",
 "league87":"A",
 "team87":"Cle"
 },
 {
 "FIELD1":13,
 "name1":"Andy",
 "name2":"Van Slyke",
 "atbat86":418,
 "hits86":113,
 "homer86":13,
 "runs86":48,
 "rbi86":61,
 "walks86":47,
 "years":4,
 "atbat":1512,
 "hits":392,
 "homeruns":41,
 "runs":205,
 "rbi":204,
 "walks":203,
 "league86":"N",
 "div86":"E",
 "team86":"StL",
 "posit86":"RF",
 "outs86":211,
 "assist86":11,
 "error86":7,
 "sal87":"550",
 "league87":"N",
 "team87":"Pit"
 },
 {
 "FIELD1":14,
 "name1":"Argenis",
 "name2":"Salazar",
 "atbat86":298,
 "hits86":73,
 "homer86":0,
 "runs86":24,
 "rbi86":24,
 "walks86":7,
 "years":3,
 "atbat":509,
 "hits":108,
 "homeruns":0,
 "runs":41,
 "rbi":37,
 "walks":12,
 "league86":"A",
 "div86":"W",
 "team86":"KC",
 "posit86":"SS",
 "outs86":121,
 "assist86":283,
 "error86":9,
 "sal87":"100",
 "league87":"A",
 "team87":"KC"
 },
 {
 "FIELD1":15,
 "name1":"Barry",
 "name2":"Bonds",
 "atbat86":413,
 "hits86":92,
 "homer86":16,
 "runs86":72,
 "rbi86":48,
 "walks86":65,
 "years":1,
 "atbat":413,
 "hits":92,
 "homeruns":16,
 "runs":72,
 "rbi":48,
 "walks":65,
 "league86":"N",
 "div86":"E",
 "team86":"Pit",
 "posit86":"CF",
 "outs86":280,
 "assist86":9,
 "error86":5,
 "sal87":"100",
 "league87":"N",
 "team87":"Pit"
 },
 {
 "FIELD1":16,
 "name1":"Ben",
 "name2":"Oglivie",
 "atbat86":346,
 "hits86":98,
 "homer86":5,
 "runs86":31,
 "rbi86":53,
 "walks86":30,
 "years":16,
 "atbat":5913,
 "hits":1615,
 "homeruns":235,
 "runs":784,
 "rbi":901,
 "walks":560,
 "league86":"A",
 "div86":"E",
 "team86":"Mil",
 "posit86":"DH",
 "outs86":0,
 "assist86":0,
 "error86":0,
 "sal87":"NA",
 "league87":"A",
 "team87":"Mil"
 },
 {
 "FIELD1":17,
 "name1":"Bill",
 "name2":"Almon",
 "atbat86":196,
 "hits86":43,
 "homer86":7,
 "runs86":29,
 "rbi86":27,
 "walks86":30,
 "years":13,
 "atbat":3231,
 "hits":825,
 "homeruns":36,
 "runs":376,
 "rbi":290,
 "walks":238,
 "league86":"N",
 "div86":"E",
 "team86":"Pit",
 "posit86":"UT",
 "outs86":80,
 "assist86":45,
 "error86":8,
 "sal87":"240",
 "league87":"N",
 "team87":"Pit"
 },
 {
 "FIELD1":18,
 "name1":"Bill",
 "name2":"Buckner",
 "atbat86":629,
 "hits86":168,
 "homer86":18,
 "runs86":73,
 "rbi86":102,
 "walks86":40,
 "years":18,
 "atbat":8424,
 "hits":2464,
 "homeruns":164,
 "runs":1008,
 "rbi":1072,
 "walks":402,
 "league86":"A",
 "div86":"E",
 "team86":"Bos",
 "posit86":"1B",
 "outs86":1067,
 "assist86":157,
 "error86":14,
 "sal87":"776.667",
 "league87":"A",
 "team87":"Bos"
 },
 {
 "FIELD1":19,
 "name1":"Bill",
 "name2":"Doran",
 "atbat86":550,
 "hits86":152,
 "homer86":6,
 "runs86":92,
 "rbi86":37,
 "walks86":81,
 "years":5,
 "atbat":2308,
 "hits":633,
 "homeruns":32,
 "runs":349,
 "rbi":182,
 "walks":308,
 "league86":"N",
 "div86":"W",
 "team86":"Hou",
 "posit86":"2B",
 "outs86":262,
 "assist86":329,
 "error86":16,
 "sal87":"625",
 "league87":"N",
 "team87":"Hou"
 },
 {
 "FIELD1":20,
 "name1":"Bill",
 "name2":"Madlock",
 "atbat86":379,
 "hits86":106,
 "homer86":10,
 "runs86":38,
 "rbi86":60,
 "walks86":30,
 "years":14,
 "atbat":6207,
 "hits":1906,
 "homeruns":146,
 "runs":859,
 "rbi":803,
 "walks":571,
 "league86":"N",
 "div86":"W",
 "team86":"LA",
 "posit86":"3B",
 "outs86":72,
 "assist86":170,
 "error86":24,
 "sal87":"850",
 "league87":"N",
 "team87":"LA"
 },
 {
 "FIELD1":21,
 "name1":"Bill",
 "name2":"Russell",
 "atbat86":216,
 "hits86":54,
 "homer86":0,
 "runs86":21,
 "rbi86":18,
 "walks86":15,
 "years":18,
 "atbat":7318,
 "hits":1926,
 "homeruns":46,
 "runs":796,
 "rbi":627,
 "walks":483,
 "league86":"N",
 "div86":"W",
 "team86":"LA",
 "posit86":"UT",
 "outs86":103,
 "assist86":84,
 "error86":5,
 "sal87":"NA",
 "league87":"N",
 "team87":"LA"
 },
 {
 "FIELD1":22,
 "name1":"Bill",
 "name2":"Schroeder",
 "atbat86":217,
 "hits86":46,
 "homer86":7,
 "runs86":32,
 "rbi86":19,
 "walks86":9,
 "years":4,
 "atbat":694,
 "hits":160,
 "homeruns":32,
 "runs":86,
 "rbi":76,
 "walks":32,
 "league86":"A",
 "div86":"E",
 "team86":"Mil",
 "posit86":"UT",
 "outs86":307,
 "assist86":25,
 "error86":1,
 "sal87":"180",
 "league87":"A",
 "team87":"Mil"
 },
 {
 "FIELD1":23,
 "name1":"Billy",
 "name2":"Beane",
 "atbat86":183,
 "hits86":39,
 "homer86":3,
 "runs86":20,
 "rbi86":15,
 "walks86":11,
 "years":3,
 "atbat":201,
 "hits":42,
 "homeruns":3,
 "runs":20,
 "rbi":16,
 "walks":11,
 "league86":"A",
 "div86":"W",
 "team86":"Min",
 "posit86":"OF",
 "outs86":118,
 "assist86":0,
 "error86":0,
 "sal87":"NA",
 "league87":"A",
 "team87":"Min"
 },
 {
 "FIELD1":24,
 "name1":"Billy",
 "name2":"Hatcher",
 "atbat86":419,
 "hits86":108,
 "homer86":6,
 "runs86":55,
 "rbi86":36,
 "walks86":22,
 "years":3,
 "atbat":591,
 "hits":149,
 "homeruns":8,
 "runs":80,
 "rbi":46,
 "walks":31,
 "league86":"N",
 "div86":"W",
 "team86":"Hou",
 "posit86":"CF",
 "outs86":226,
 "assist86":7,
 "error86":4,
 "sal87":"110",
 "league87":"N",
 "team87":"Hou"
 },
 {
 "FIELD1":25,
 "name1":"Billy Jo",
 "name2":"Robidoux",
 "atbat86":181,
 "hits86":41,
 "homer86":1,
 "runs86":15,
 "rbi86":21,
 "walks86":33,
 "years":2,
 "atbat":232,
 "hits":50,
 "homeruns":4,
 "runs":20,
 "rbi":29,
 "walks":45,
 "league86":"A",
 "div86":"E",
 "team86":"Mil",
 "posit86":"1B",
 "outs86":326,
 "assist86":29,
 "error86":5,
 "sal87":"67.5",
 "league87":"A",
 "team87":"Mil"
 },
 {
 "FIELD1":26,
 "name1":"Billy",
 "name2":"Sample",
 "atbat86":200,
 "hits86":57,
 "homer86":6,
 "runs86":23,
 "rbi86":14,
 "walks86":14,
 "years":9,
 "atbat":2516,
 "hits":684,
 "homeruns":46,
 "runs":371,
 "rbi":230,
 "walks":195,
 "league86":"N",
 "div86":"W",
 "team86":"Atl",
 "posit86":"OF",
 "outs86":69,
 "assist86":1,
 "error86":1,
 "sal87":"NA",
 "league87":"N",
 "team87":"Atl"
 },
 {
 "FIELD1":27,
 "name1":"Bip",
 "name2":"Roberts",
 "atbat86":241,
 "hits86":61,
 "homer86":1,
 "runs86":34,
 "rbi86":12,
 "walks86":14,
 "years":1,
 "atbat":241,
 "hits":61,
 "homeruns":1,
 "runs":34,
 "rbi":12,
 "walks":14,
 "league86":"N",
 "div86":"W",
 "team86":"SD",
 "posit86":"2B",
 "outs86":166,
 "assist86":172,
 "error86":10,
 "sal87":"NA",
 "league87":"N",
 "team87":"SD"
 },
 {
 "FIELD1":28,
 "name1":"Bo",
 "name2":"Diaz",
 "atbat86":474,
 "hits86":129,
 "homer86":10,
 "runs86":50,
 "rbi86":56,
 "walks86":40,
 "years":10,
 "atbat":2331,
 "hits":604,
 "homeruns":61,
 "runs":246,
 "rbi":327,
 "walks":166,
 "league86":"N",
 "div86":"W",
 "team86":"Cin",
 "posit86":"C",
 "outs86":732,
 "assist86":83,
 "error86":13,
 "sal87":"750",
 "league87":"N",
 "team87":"Cin"
 },
 {
 "FIELD1":29,
 "name1":"Bob",
 "name2":"Boone",
 "atbat86":22,
 "hits86":10,
 "homer86":1,
 "runs86":4,
 "rbi86":2,
 "walks86":1,
 "years":6,
 "atbat":84,
 "hits":26,
 "homeruns":2,
 "runs":9,
 "rbi":9,
 "walks":3,
 "league86":"A",
 "div86":"W",
 "team86":"Cal",
 "posit86":"C",
 "outs86":812,
 "assist86":84,
 "error86":11,
 "sal87":"NA",
 "league87":"A",
 "team87":"Cal"
 },
 {
 "FIELD1":30,
 "name1":"Bob",
 "name2":"Brenly",
 "atbat86":472,
 "hits86":116,
 "homer86":16,
 "runs86":60,
 "rbi86":62,
 "walks86":74,
 "years":6,
 "atbat":1924,
 "hits":489,
 "homeruns":67,
 "runs":242,
 "rbi":251,
 "walks":240,
 "league86":"N",
 "div86":"W",
 "team86":"SF",
 "posit86":"C",
 "outs86":518,
 "assist86":55,
 "error86":3,
 "sal87":"600",
 "league87":"N",
 "team87":"SF"
 },
 {
 "FIELD1":31,
 "name1":"Bob",
 "name2":"Dernier",
 "atbat86":324,
 "hits86":73,
 "homer86":4,
 "runs86":32,
 "rbi86":18,
 "walks86":22,
 "years":7,
 "atbat":1931,
 "hits":491,
 "homeruns":13,
 "runs":291,
 "rbi":108,
 "walks":180,
 "league86":"N",
 "div86":"E",
 "team86":"Chi",
 "posit86":"CF",
 "outs86":222,
 "assist86":3,
 "error86":3,
 "sal87":"708.333",
 "league87":"N",
 "team87":"Chi"
 }];
 //////////
 function arr(){
 for(var i=0;i<data.length;i++){
 array[i] = data[i].name1;
 }
 }
 function parents(){
 var childs = [];
 while(data.length){
 var child2 = new Object();
 child2.FIELD1 = data[0].FIELD1;
 child2.homer86 = data[0].homer86;
 //child2.nodeDepth = 0;
 data.splice(0, 1);
 childs.push(child2);
 child2.subChilds = children(child2, 1); // calling child function with passing parent parameter
 }
 document.getElementById("table").innerHTML = displayGraph(childs);
 //displayTable(childs);
 }
 function children(node, treeSpace){
 var childs = [];
 for(var i=0;i<data.length;i++){
 if (data[i].homer86 == node.FIELD1){
 var child = new Object();
 child.FIELD1 = data[i].FIELD1;
 child.homer86 = data[i].homer86;
 child.treeSpace = treeSpace;
 data.splice(i, 1); // i means minimum elements should b there. and 1 element is removing
 child.subChilds = children(child, treeSpace + 1);
 childs.push(child); 
 }
 }
 return childs; 
 }
 function displayGraph(childs) {
 var space = "";
 for (var i = 0; i < childs.length; i++) {
 space += '<br>';
 var field = childs[i].FIELD1;
 if (childs[i].subChilds.length > 0) {
 for (var j = 0; j <childs[i].treeSpace+1; j++) {
 space += '\u00A0\u00A0\u00A0\u00A0';
 }
 var name = array[field - 1];
 space += +field+ "&nbsp;" + name + displayGraph(childs[i].subChilds);
 } else {
 for (var j = 0; j < childs[i].treeSpace; j++) {
 space += '\u00A0\u00A0\u00A0\u00A0';
 }
 var name = array[field - 1];
 space += "|------"+'&nbsp;' + field + "&nbsp;" + name;
 }
 }
 return space;
 }

<pre id="table"></pre>

• 200_success: Running the Stack Snippet of your code shows a weird-looking "tree" — can you confirm that the output is what you wanted?
• Chrillewoodz: You should also ask yourself if it's necessary to post the entire JSON..
• Priyantha Weerasinghe: what about the edited view. Now the tree is little bit ok. But my question is how to implement this type of tree different way. I want to change the parent() and child() functions.

Answer 1

Dead code

Dead code doesn't do anything except clutter up the code and confuse readers. Is this for debugging, or is it buggy code? Something else, maybe? Whatever it is, it should be removed once the code is working as expected.

//displayTable(childs);

Indentation

for(var i=0;i<data.length;i++){
if (data[i].homer86 == node.FIELD1){
 /* ... */
}
}

It is easier to see which code is in which scope if you have it indented one level per scope. In fact, some languages take this so seriously that the level of indentation determines the scope, including Python.

Also:

function parents(){
 var childs = [];
 while(data.length){
 var child2 = new Object();
 /* ... */
 }
}

Spacing

function arr(){
 /* ... */
}
function parents(){
 /* ... */
}

Excess spaces don't do anything except make your eye scan more of the page to find the next statement.

Data

Your data looks awful long and similar. Is there any official source you could pull it from instead of hard-coding it? If there isn't, why don't you set up a separate JSON file for maintaining the data that your program reads from?

Footnote

"Child" in plural is "Children", not "Childs".