深层遍历节点的方法，生成对应的JSON数据

Question

业务需求。我需要把生成的HTML结构生成对应的 JSON。自己写的始终有错误，求指导。

<div id="test">
    <div class="row clearfix"  data-layout-value="4-4-4">
        <div class="col-md-4 column">
            <img src="http://placehold.it/200x150?text=Test4" alt='' data-widgetIdentity="c-c:3.0" data-styleId="4" />
        </div>
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <img src="http://placehold.it/200x150?text=Test4" alt='' data-widgetIdentity="c-c:3.0" data-styleId="4" />
            <div class="row clearfix"  data-layout-value="6-6">
                <div class="col-md-6 column">
                    <img src="http://placehold.it/200x150?text=Test3" alt='' data-widgetIdentity="x-a:4.0" data-styleId="2"/>
                </div>
                <div class="col-md-6 column" data-empty="true">
                </div>
            </div>
        </div>
    </div>
</div>

然后目标JSON：

var json = {
        "elements": [
            {
                "layout": {
                    "value": "4-4-4",
                    "elements": [
                        {
                            "component": {
                                "widgetIdentity": "c-c:3.0",
                                "styleId": "4",
                                "properties": {}
                            }
                        },
                        {
                            "empty": {}
                        },
                        {
                            "component": {
                                "widgetIdentity": "c-c:3.0",
                                "styleId": "4",
                                "properties": {}
                            },
                            "layout": {
                                "value": "6-6",
                                "elements": [
                                    {
                                        "component": {
                                            "widgetIdentity": "x-a:4.0",
                                            "styleId": "2",
                                            "properties": {}
                                        }
                                    },
                                    {
                                        "empty": {}
                                    }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    };

自己的方法：

function createROOT(elements) {
        var json = {};
        var data = [];
        var root = $(elements).children();
        $.each(root, function (i, v) {
            var child = {};
            child.layout = {};
            child.layout.value = $(v).attr('data-layout-value');
            child.layout.elements = traversalDOM2Json(v);
            data.push(child);
        });
        json.elements = data;
        return json
    }

    function traversalDOM2Json(elements) {
        var result = [];
        var key = {};
        var ele = $(elements).children();
        $.each(ele, function (i, v) {
            var html = $.trim($(v).html());
            if ( html == '') {
                key.empty = {};
                result.push(key);
            } else {
                var children = $(this).children();
                $.each(children, function (i, v) {
                    result.push(distinguishDOMType(v));
                });
            }
        });
        return result;
    };

    function distinguishDOMType(elements) {
        var childJSON = {};
        console.log(elements)
        if ( $(elements).hasClass('row') ) {
            childJSON.layout = {};
            childJSON.layout.value = $(elements).attr('data-layout-value');
            childJSON.layout.elements = traversalDOM2Json(elements);
        } else {
            childJSON.component = {};
            childJSON.component.widgetIdentity = $(elements).attr('data-widgetIdentity');
            childJSON.component.styleId = $(elements).attr('data-styleId');
            childJSON.component.properties = {};
        }
        return childJSON;
    };

    var json = createROOT('#test');
    console.log(JSON.stringify(json));

输出的JSON:

{
    "elements": [
        {
            "layout": {
                "value": "4-4-4",
                "elements": [
                    {
                        "component": {
                            "widgetIdentity": "c-c:3.0",
                            "styleId": "4",
                            "properties": {}
                        }
                    },
                    {
                        "empty": {}
                    },
                    {
                        "component": {
                            "widgetIdentity": "c-c:3.0",
                            "styleId": "4",
                            "properties": {}
                        }
                    },
                    {
                        "layout": {
                            "value": "6-6",
                            "elements": [
                                {
                                    "component": {
                                        "widgetIdentity": "x-a:4.0",
                                        "styleId": "2",
                                        "properties": {}
                                    }
                                },
                                {
                                    "empty": {}
                                }
                            ]
                        }
                    }
                ]
            }
        }
    ]
}

也就是最后一个节点的嵌套关系始终不对。求大家指点。

Answer 1

原因是traversalDOM2Json中第二个each中你distinguishDOMType的结果也放到了result中，所以最后那个div解析出来的结果也就出了问题。

这样改一下，能解决嵌套问题

function traversalDOM2Json(elements) {
        var result = [];
        var key = {};
        var ele = $(elements).children();
        $.each(ele, function (i, v) {
            var html = $.trim($(v).html());
            if ( html == '') {
                key.empty = {};
                result.push(key);
            } else {
                var children = $(this).children();
                var r = []
                $.each(children, function (i, v) {
                    r.push(distinguishDOMType(v));
                });
                result.push(r);
            }
        });
        return result;
    };

输出的JSON会是这样：

{
  "elements": [
    {
      "layout": {
        "value": "4-4-4",
        "elements": [
          [
            {
              "component": {
                "widgetIdentity": "c-c:3.0",
                "styleId": "4",
                "properties": {}
              }
            }
          ],
          {
            "empty": {}
          },
          [
            {
              "component": {
                "widgetIdentity": "c-c:3.0",
                "styleId": "4",
                "properties": {}
              }
            },
            {
              "layout": {
                "value": "6-6",
                "elements": [
                  [
                    {
                      "component": {
                        "widgetIdentity": "x-a:4.0",
                        "styleId": "2",
                        "properties": {}
                      }
                    }
                  ],
                  {
                    "empty": {}
                  }
                ]
              }
            }
          ]
        ]
      }
    }
  ]
}

我觉得你的目标JSON那里是不是有一点问题？第三个结点的子节点应该构成一个数组而不是一个对象。