CODEWITHSUNDEEP
angularjsjsonangularjs-ng-repeat
Itsik Mauyhas
Itsik Mauyhas

Reputation: 3984

Nested ng-repeat with vertical table

I have a json array that contains x number elements where each one is another json array. I want to iterate over this array using a nested ng-repeat, something like nested ng-repeat.

My problem is I want to do it in a "vertical table": 

<!-- for the big json -->
<table ng-repeat = "obj in data "style="width:100%">
  <tr>
    <th>data01</th>
    <!--for thr first object in the big json -->
    <tr ng-repeat = "var in obj">{{var}}</tr>
  </tr>
  <tr>
    <!--for the second object in the big json -->
    <th>data02</th>
    <tr ng-repeat = "var in obj">{{var}}</tr>
  </tr>
</table>

data 

[ "data01":[{"firstName":"John", "lastName":"Doe"}], "data02":["{"firstName":"Anna", "lastName":"Smith"}], "data03":[{"firstName":"Peter","lastName":"Jones"}] ]

So the first ng-repeat will be for each object, and the second will inseart values to the 'right' side of the table.

I can't find the correct way to organize the HTML elements so it will display them in this order. Here is an example for what I mean by "vertical table".

Upvotes: 1

Views: 2705

Answers (3)

Mahaveer Jangir
Mahaveer Jangir

Reputation: 605

Use ng-repeat in td instead of tr or table. I had the same issue and finally managed to display result in vertical table.

<div id="bdDiv" ng-controller="businessDate" ng-init="init()">
    <table>
        <tr >
            <th>Country</th>
            <td ng-repeat="item in response">{{item.type}}</td>
        </tr>
        <tr >
            <th>STAT</th>   
            <td ng-repeat="item in response">{{item.statDate}}</td>
        </tr>
        <tr >
            <th>OTP</th>    
            <td ng-repeat="item in response">{{item.otpDate}}</td>
        </tr>
        <tr >
            <th>LTP</th>
            <td ng-repeat="item in response">{{item.ltpDate}}</td>
        </tr>
    </table>
</div>

Upvotes: 1

Claies
Claies

Reputation: 22323

In order for your table to display the information in the format you are describing, we have to make a few assumptions about your data. Notably, we are assuming that your arrays will always be output in the same order, and only the first object in each array contains the data you care about for the purpose of this table. If your data is in a different order, or if you have multiple objects within an array you wish to iterate over, the format you describe would not be achievable.

In practice, this solution is very rigid, and will break if the data changes in any way. This is not a normal design for angular; Whenever possible, you should try to produce data that is a closer representation to the information you want to work with.

This solution uses a combination of array access and (key, value) iterations to achieve the result. 

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = [{
    "data01": [{
      "firstName": "John",
      "lastName": "Doe"
    }],
    "data02": [{
      "firstName": "Anna",
      "lastName": "Smith"
    }],
    "data03": [{
      "firstName": "Peter",
      "lastName": "Jones"
    }]
  }];
});
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table style="width:100%">
    <tr ng-repeat="(key,values) in data[0]">
      <th>{{key}}</th>
      <td ng-repeat="(key, value) in values[0]">{{value}}</td>
    </tr>
  </table>
</body>

</html>

Upvotes: 2

Pravesh Khatri
Pravesh Khatri

Reputation: 2244

I don't know why are you iterating Twice for obj

<table ng-repeat = "(key,obj) in data "style="width:100%">
    <tr> 
      <th>{{key}}</th>
    </tr>
    <tr ng-repeat = "var in obj">          
        <td>{{var}}</td>
    </tr>
</table>

Upvotes: 2

Related Questions