2-й многоуровневый объект в таблице с повторением ng - PullRequest
Новая
       7

2-й многоуровневый объект в таблице с повторением ng

0 голосов
/ 04 июля 2018

У меня есть двумерный вложенный объект, подобный этому 

$scope.analysisDataNew = [
  {
    "data":{
      "row1":{
          "col1":{
              "subCol1": 10,
              "subCol2": 10,
          },
          "col2":{
              "subCol1": 10,
              "subCol2": 10,
              "subCol3": 10,
          },
          "col3":{
              "subCol1": 10,
          },
      },
      "row2":{
          "col1":{
              "subCol1": 10,
              "subCol2": 10,
          },
          "col2":{
              "subCol1": 10,
              "subCol2": 10,
              "subCol3": 10,
          },
          "col3":{
              "subCol1": 10,
          },
      },
    }
  }
];

Я пытаюсь использовать его для создания таблицы с помощью ng-repeat.

Что я пробовал до сих пор это 

for (var i = 0; i < $scope.analysisDataNew.length; i++) {

    // row list
    $scope.analysisDataNew[i].xAxis = Object.keys($scope.analysisDataNew[i].data);

    // col list 
    if($scope.analysisDataNew[i].subCol){
        var rows = Object.keys($scope.analysisDataNew[i].data);
        var cols = $scope.analysisDataNew[i].data[rows[0]];
        var colList = [];
        for(var j=0; j<Object.keys(cols).length; j++){
            colList.push({name: Object.keys(cols)[j]});
            colList[j].subcol = [];
            for(var k=0; k < Object.keys(cols[Object.keys(cols)[j]]).length; k++){
                colList[j].subcol.push(Object.keys(cols[Object.keys(cols)[j]])[k]);
            };
        };
        $scope.analysisDataNew[i].colList = colList;
    } else {
        $scope.analysisDataNew[i].colList = Object.keys($scope.analysisDataNew[i].data[$scope.analysisDataNew[i].xAxis[0]]);
    };
    console.log($scope.analysisDataNew[i]);
};

Когда нет подколонки, я легко могу напечатать данные, но проблема с подколонкой.

Может кто-нибудь, пожалуйста, помогите ??

1 Ответ

0 голосов
/ 04 июля 2018

Я создал решение для всех делений, в котором я не преобразовываю данные заранее: https://next.plnkr.co/edit/3fVwZCyyeeHhu6AT

Хитрость заключается в использовании ng-repeat = "(key, value) in ...", как описано здесь: Как использовать ng-repeat для перебора элементов карты в AngularJS . Это позволяет перебирать карту: 

<div class="tbl">
   <div ng-repeat='(rowId, rowValue) in analysisDataNew[0].data' class="tbl-row"> 
      <div ng-repeat="(colId, colValue) in rowValue" class="tbl-cell"> 
         <div class="tbl tbl-inner">
            <div class="tbl-row"> 
               <div ng-repeat="(subColId, subColValue) in colValue" class="tbl-cell"> 
                    {{subColValue}}
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Если вы (вероятно) хотите отобразить все данные для всех записей в analysisDataNew, вам потребуется дополнительный ng-повтор вокруг внешнего ng-повторения.

...