Nested ng-repeat with vertical table

Question

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

You have to creat new json or create table using divs and classes like display: table — Drag13, Jun 16 '16 at 06:09
I've been trying to study the sample HTML you are providing, and I can't seem to match up how your data corresponds with the layout. can you post your actual JSON, instead of random sample data? — Claies, Jun 16 '16 at 06:23
data - [ "data01":[{"firstName":"John", "lastName":"Doe"}], "data02":["{"firstName":"Anna", "lastName":"Smith"}], "data03":[{"firstName":"Peter","lastName":"Jones"}] ] — Itsik Mauyhas, Jun 16 '16 at 06:45
I took your data and fixed it slightly, and now I'm trying to create output from it, and I'm still unclear. can you post here the table that you expect as a result? You have multiple levels of headers to process. Are you expecting a table for each group? — Claies, Jun 16 '16 at 07:04
Somthing like - http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers - the vertical table. — Itsik Mauyhas, Jun 16 '16 at 07:07
the data you posted in the comments doesn't even parse correctly; I'm trying to make some guesses as to what your intent is, but it still isn't clear. and yes, you linked that already, but it still doesn't match your data. is "firstName", "lastName", etc the headers you want printed? and if so, do you want a new table for each "data01", "data02", etc? You have an array of objects with sub objects. which is the header row? the name of the object properties, or the name of the sub object properties? — Claies, Jun 16 '16 at 07:08
The data should displayed like : data 01 in the left side of the table ('name' in the example) and its properties in the right side on the same line, is it clear? ot should I post more code?. — Itsik Mauyhas, Jun 16 '16 at 07:11
it's still not right; you have an array with an object that has another array with another object; is this *really* the data you are working with? you are trying to design a two dimensional table with 4 dimensional data. — Claies, Jun 16 '16 at 07:17
No, as I said each table row should contain key-value, key is data01 and the value is the list insead of the object(without the 'first name' and 'last name') - row example : data01 - jhon(first line) doe(second line). — Itsik Mauyhas, Jun 16 '16 at 07:23
right, so your data isn't structured to be looped through in that way. I'm trying to find a way to do it, but I'm not sure if it is possible without actually rendering your data the way you expect it to be viewed. — Claies, Jun 16 '16 at 07:26
is `data01`, `data02`, `data03` **really** arrays of objects in your real data set? — Claies, Jun 16 '16 at 07:30
yes, that data is not structured, the values are mostly arrays and json objects. — Itsik Mauyhas, Jun 16 '16 at 07:34
so what should happen if `data01` has two objects with those keys? are we just assuming that the first object is always the one you want, and the arrays will always be output in the same order? — Claies, Jun 16 '16 at 07:36

Pravesh Khatri · Answer 1 · 2016-06-16T07:37:03.953

2

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>

edited Jun 16 '16 at 07:37

answered Jun 16 '16 at 06:14

Pravesh Khatri

2,124
16
22

Trying and posting the result. – Itsik Mauyhas Jun 16 '16 at 06:25
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers - vertical table example. – Itsik Mauyhas Jun 16 '16 at 07:08
@ItsikMauyhas: You have given us Array instead of a Hash – Pravesh Khatri Jun 16 '16 at 07:41

Claies · Accepted Answer · 2016-06-16T07:46:54.167

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="angular.js@1.4.x" 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>

there are a lot of assumptions made with this solution. any time you have to work with `(key, value)` instead of the actual property names, you are then *very tightly* coupled to the data output, and any change to the data will break your view. This isn't the best way to work with data in angular at all. — Claies, Jun 16 '16 at 07:49

score 1 · Answer 3 · edited Mar 19 '17 at 12:02

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>

Nested ng-repeat with vertical table

3 Answers3