JavaScript to list out connection with nested Json and implement it with GOJS

Question

I have a JSON DATA like the following

 [
  {
    "name": "car",
    "value": "",
    "children": [
      {
        "name": "v8_engine",
        "value": "",
        "children": [
          {
            "name": "cylinder-arrangement",
            "value": "",
            "children": [
              {
                "name": "type",
                "value": "string",
                "children": []
              },
              {
                "name": "max-elements",
                "value": "8",
                "children": []
              }
            ]
          }
        ]
      },
      {
        "name": "other-parts",
        "value": "",
        "children": [
          {
            "name": "per-cylinder-parts",
            "value": "",
            "children": [
              {
                "name": "piston-diameter",
                "value": "",
                "children": [
                  {
                    "name": "type",
                    "value": "uint32",
                    "children": []

                  },
                  {
                    "name": "range",
                    "value": "2000... 9000",
                    "children": []

                  }
                ]
              },
              {
                "name": "valves",
                "value": "",
                "children": [
                  {
                    "name": "number",
                    "value": "",
                    "children": []
                  },
                  {
                    "name": "position",
                    "value": "",
                    "children": []
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

I want to parse through each elements and their respective childrens and list them out as parent children and their grand children like a simple tree in GOJS.

I am using the following logic but that just parses and pushes node data and link data array element in go-js model.

var i=0;

            function loop(a) {
                if(a.yang_type!='' && a.name!=''){
                  nodeDataArray.push({ key:i,Data: a.yang_type + " " + a.name, group: -1 });
                    console.log("Data:",a.yang_type);
                    linkDataArray.push({ from: i, to: i+1 });
              }

                if(a.name!='' && a.value!=''){
                    nodeDataArray.push({ key:i,Data: a.name + " " + a.value, group: -1 });
                    linkDataArray.push({ from: 0, to: i+1 });

                }
                //console.log(a.name);
                i=i+1;
                // process you data
                Array.isArray(a.children) && a.children.forEach(loop); // check and iterate children
                myDiagram.model = go.GraphLinksModel(nodeDataArray, linkDataArray);

            }

Attached is the output that i am getting but the childrens are cluttered. Am I missing some logic in pushing?

its representing the JSON as a tree in GOJS . I need a logic in Javascript that parses through the element and then pushes them to nodeDataArray and linkData Array — Nadvez, Jun 21 '16 at 17:46

score 0 · Answer 1 · answered Jun 21 '16 at 20:55

0

I suggest that you use a GoJS TreeModel rather than a GraphLinksModel. http://gojs.net/latest/intro/usingModels.html

Take a look at the DOM Tree sample, http://gojs.net/latest/samples/DOMTree.html. Note in particular the traverseDom function. TreeModels expect to have a reference from the child data to the parent data. HTML DOM, like your data parsed from JSON, has the references to the children in an Array in the parent data. That sample's traverseDom function makes sure each data object has a key that is a number or a string and then assigns the child's parent property to that key value.

You can then use an Array of those objects as the TreeModel.nodeDataArray.

answered Jun 21 '16 at 20:55

Walter Northwoods

4,061
2
10
16

The Implementation is for having two or more records with tree's inside them. – Nadvez Jun 21 '16 at 23:45
1

Ah, so not such a simple tree after all. I guess you're doing something like the TreeMapper sample, http://gojs.net/latest/samples/treeMapper.html ? OK, use a **GraphLinksModel** after all. Each time you would have set the `parent` property on the child data, add a `{ from: parentkey, to: childkey }` to the linkDataArray. – Walter Northwoods Jun 22 '16 at 03:57
Yeah. That one i did understand but i am looking for some java script function that parses through my json object and pushes node data array and link data Array – Nadvez Jun 22 '16 at 12:25

score 0 · Answer 2 · answered Jun 22 '16 at 17:24

var nodeDataArray = [
                                 {isGroup:true,key:-1,text:"Service Parameters",xy:"210 31.999999999999996"},
                                 { isGroup: true, key: -2, text: "Device Model", xy: "435 36.000000000000014"}
                               ];
                    var linkDataArray = [];


                    var i=0;
                    function loop(from) {           
                        return function (a) {
                            var f = i;

                            if(a.yang_type!='' && a.name!=''){
                                  nodeDataArray.push({ key:i,Data: a.yang_type + " " + a.name, group: -1 });
                                  //c=c+a.name;
                                  //console.log("c:",c);
                                //console.log("Data:",a.yang_type);
                                //linkDataArray.push({ from: i, to: i+1 });
                              }

                            if(a.name!='' && a.value!=''){
                                nodeDataArray.push({ key:i,Data: a.name + " " + a.value, group: -1 });
                                //c=c+a.name+a.value;
                                console.log("c:",c);
                                //linkDataArray.push({ from: 0, to: i+1 });

                            }
                            if (from !== undefined) {
                                linkDataArray.push({ from: from, to: i });
                            }
                            i++;
                            if (Array.isArray(a.children)) {
                                a.children.forEach(loop(f));
                            }
                            //console.log("c:",c);
                        };

                    }

JavaScript to list out connection with nested Json and implement it with GOJS

2 Answers2