JavaScript 列出与嵌套 Json 的连接并用 GOJS 实现它答案

【问题标题】：JavaScript to list out connection with nested Json and implement it with GOJSJavaScript 列出与嵌套 Json 的连接并用 GOJS 实现它
【发布时间】：2016-06-21 17:34:13
【问题描述】：

我有如下 JSON 数据

 [
  {
    "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": []
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

我想解析每个元素及其各自的子元素，并将它们列为父子元素和它们的孙子元素，就像 GOJS 中的一棵简单的树。

我正在使用以下逻辑，但这只是解析和推送 go-js 模型中的节点数据和链接数据数组元素。

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);

            }

附加的是我得到的输出，但孩子们很混乱。我在推动时错过了一些逻辑吗？

【问题讨论】：

到底是什么问题？
它在 GOJS 中将 JSON 表示为一棵树。我需要 Javascript 中的逻辑来解析元素，然后将它们推送到 nodeDataArray 和 linkData Array

标签： javascript json gojs ietf-netmod-yang

【解决方案1】：

我建议你使用 GoJS TreeModel 而不是 GraphLinksModel。 http://gojs.net/latest/intro/usingModels.html

查看 DOM 树示例，http://gojs.net/latest/samples/DOMTree.html。特别注意traverseDom 函数。 TreeModel 期望有从子数据到父数据的引用。 HTML DOM 与从 JSON 解析的数据一样，在父数据的 Array 中具有对子项的引用。该示例的traverseDom 函数确保每个数据对象都有一个数字或字符串键，然后将子对象的parent 属性分配给该键值。

然后您可以使用这些对象的数组作为 TreeModel.nodeDataArray。

【讨论】：

实现是为了有两个或多个记录，其中包含树。
啊，毕竟不是这么简单的树。我猜你正在做类似 TreeMapper 示例 gojs.net/latest/samples/treeMapper.html 的事情？好的，毕竟使用 GraphLinksModel。每次在子数据上设置parent 属性时，将{ from: parentkey, to: childkey } 添加到linkDataArray。
是的。那个我确实理解，但我正在寻找一些通过我的 json 对象解析并推送节点数据数组和链接数据数组的 java 脚本函数

【解决方案2】：

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);
                        };

                    }

【讨论】：