Javascript 需要将层次结构的JSON转换为行格式的html表

我有一个JSON结构，比如

$scope.data = [
        {
            "type":"Internal",
            "count": 3,
            "library" : [
                {
                "type":"Library 123",
                "count": 2,
                "version" : ["1.3","2.3"]
                },
                {
                "type":"Library 1111",
                "count": 1,
                "version" : ["556.3"]
                }

            ]
        },
        {
            "type":"External",
            "count": 3,
            "library" : [
                {
                "type":"Library 09090909",
                "count": 2,
                "version" : ["1.3","2.3"]
                },
                {
                "type":"Library 1212121212",
                "count": 1,
                "version" : ["556.3"]
                }
            ]
        }
    ]

我需要把它转换成一个html表格。例如，按照count变量的规定，将内部跨距分成3行。我试图在html中做的是

<table>

    <div ng-repeat="row in data">
        {{$root.rowFirst=true;""}}
        <div ng-repeat="lib in row.library" >
            {{$root.libFirst=true;""}}
            <div ng-repeat="ver in lib.version">
                <tr>

                    <td ng-if="$root.rowFirst" rowspan="{{row.count}}">{{row.type}}  {{$root.rowFirst=false;""}}</td>
                    <td ng-if="$root.libFirst" rowspan="{{lib.count}}">{{lib.type}}  {{$root.libFirst=false;""}}</td>
                    <td>{{ver}}</td>
                </tr>
            </div>
        </div>
    </div>

    </table>

---

我没有在视图（html）中循环，而是在控制器中迭代每个元素，并构建一个新的数组，其中包含我需要的所有信息

    $scope.dataMod = [];
    var newType , newLib, tempObj;

    angular.forEach($scope.data, function(type, key) {
          newType =true ;
          angular.forEach(type.library, function(lib, key) {
            newLib = true;
            angular.forEach(lib.version, function(ver, key) {
                tempObj = {};
                if(newType) {
                    tempObj.typeName = type.type;
                    tempObj.typeCount = type.count;
                    newType=false;
                }
                if(newLib) {
                    tempObj.libName = lib.type;
                    tempObj.libCount = lib.count;
                    newLib=false;
                }
                tempObj.version = ver;
                $scope.dataMod.push(tempObj);

            });

          });
    });

在html中

    <table border="1" width="100%"  >
        <tr ng-repeat="data in dataMod">
            <td ng-if="data.typeCount" rowspan="{{data.typeCount}}">{{data.typeName}}</td>
            <td ng-if="data.libCount" rowspan="{{data.libCount}}">{{data.libName}} </td>
            <td> {{data.version}}</td>
        </tr>
    </table>

{{data.typeName}
{{data.libName}
{{data.version}

table>**div>div**>tr>td看起来很奇怪。。table>tbody>tr>tdjsfiddle上提供您的代码这应该做什么<代码>$root.rowFirst=false；“”您的无限摘要可能来自于此，这里是jsfiddle代码$root.rowFirst=false；之所以使用，是因为对于行中的每个迭代，数据都需要放入一次。因此，在第一次添加后，需要在第二次添加时将其排除，因为它跨越3行。再次，当新迭代再次开始时，需要添加到，以便将值设置为true（{{$root.rowFirst=true；“”}）。

    <table border="1" width="100%"  >
        <tr ng-repeat="data in dataMod">
            <td ng-if="data.typeCount" rowspan="{{data.typeCount}}">{{data.typeName}}</td>
            <td ng-if="data.libCount" rowspan="{{data.libCount}}">{{data.libName}} </td>
            <td> {{data.version}}</td>
        </tr>
    </table>