Необходимо преобразовать иерархический JSON в html-таблицу со строками строк

Question

Необходимо преобразовать иерархический JSON в html-таблицу со строками строк

0

У меня есть структура 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. например, Internal охватывает 3 строки, как указано в переменной count. То, что я пытался сделать в 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>

но я получил ошибку angilejs infdig. может ли кто-нибудь помочь мне построить таблицу html.

Конечным результатом должно быть что-то вроде этого

                                  1.3
                  Library 123     2.3   
Internal          Library 1111    556.3


                                  1.3
                  Library 123     2.3   
External          Library 1111    556.3

RoHaN 25 нояб. 2015, в 07:51

Источник

0

таблица> ** div> div **> tr> td выглядит странно .. table> tbody> tr> td
webdeb 25 нояб. 2015, в 06:43
0

предоставьте свой код на JSfiddle
Upal Roy 25 нояб. 2015, в 06:50
0

что это должно делать? $root.rowFirst=false;"" ваш бесконечный дайджест, вероятно, исходит от этой вещи
floribon 25 нояб. 2015, в 06:51
0

вот код jsfiddle: jsfiddle.net/7gwqc8dh
RoHaN 25 нояб. 2015, в 06:54
0

$ Root.rowFirst = ложь; используется потому, что для каждой итерации в <div ng-repeat = "row in data"> данные строки должны быть помещены в <tr> один раз. поэтому после добавления в первый раз необходимо исключить его во второй раз, потому что он охватывает 3 строки. При повторном запуске новой итерации необходимо добавить к этому значение значение true ({{$ root.rowFirst = true; ""} }).
RoHaN 25 нояб. 2015, в 06:55

Показать ещё 3 комментария

Теги:

javascript

html

angularjs

arrays

json

1 ответ

Ещё вопросы

таблица> ** div> div **> tr> td выглядит странно .. table> tbody> tr> td
что это должно делать? $root.rowFirst=false;"" ваш бесконечный дайджест, вероятно, исходит от этой вещи
$ Root.rowFirst = ложь; используется потому, что для каждой итерации в <div ng-repeat = "row in data"> данные строки должны быть помещены в <tr> один раз. поэтому после добавления в первый раз необходимо исключить его во второй раз, потому что он охватывает 3 строки. При повторном запуске новой итерации необходимо добавить к этому значение значение true ({{$ root.rowFirst = true; ""} }).

RoHaN · Accepted Answer · 2015-11-25T07-54-00.000Z

Вместо того, чтобы зацикливаться на представлении (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>