2d multi level object in table with ng-repeat

Question

I have a 2D nested object like this

$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,
          },
      },
    }
  }
];

I am trying to use it for creating a table for with ng-repeat.

What i have tried so far is this

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

When there is no sub-column i am easily able to print the data but the problem is with sub-column.

Can anybody please help??

yes ofcourse i tried creating my array with loop in controller and till there is no subcolumn i am fine and able to print data in table as well as in highcharts but i am facing issues with subcolumns — Gaurav Aggarwal, Jul 04 '18 at 08:06
@GauravAggarwal can you change the objects to an array instead? Once that's done, it will be easy — Aleksey Solovey, Jul 04 '18 at 08:10
@AlekseySolovey yes the object can be modified but can u please help a bit a it will be done with array?? — Gaurav Aggarwal, Jul 04 '18 at 08:12
I'm not sure about sub-column implementation in HTML tables, but here is an example of using arrays instead of objects: [Plunker](https://plnkr.co/edit/e2h9tLZ8IwpjEYg22Atj?p=preview) — Aleksey Solovey, Jul 04 '18 at 08:27
@GauravAggarwal how do you want the sub columns to be presented? As a single-row, multi-column table inside a colX cell? — mvermand, Jul 04 '18 at 08:46
i want a row with columns with cols span of subcolumn length then another row of column — Gaurav Aggarwal, Jul 04 '18 at 08:51

score 0 · Answer 1 · answered Jul 04 '18 at 09:03

I have created an all-div solution where I do not transform the data in advance: https://next.plnkr.co/edit/3fVwZCyyeeHhu6AT

The trick is using a ng-repeat="(key, value) in ..." as described here: How to use ng-repeat to iterate over map entries in AngularJS. This allows to iterate over a Map:

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

If you (probably) want to show all data for all entries in analysisDataNew, you need an extra ng-repeat around the outer ng-repeat.

@Gaurav Aggarwal, did my solution fit your needs? – mvermand Jul 05 '18 at 10:59 — mvermand, Jul 05 '18 at 10:59

2d multi level object in table with ng-repeat

1 Answers1