Itsik Mauyhas Itsik Mauyhas - 1 year ago 115
JSON Question

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

, 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%">
<!--for thr first object in the big json -->
<tr ng-repeat = "var in obj">{{var}}</tr>
<!--for the second object in the big json -->
<tr ng-repeat = "var in obj">{{var}}</tr>


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

So the first
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".

Answer Source

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) {
  $ = [{
    "data01": [{
      "firstName": "John",
      "lastName": "Doe"
    "data02": [{
      "firstName": "Anna",
      "lastName": "Smith"
    "data03": [{
      "firstName": "Peter",
      "lastName": "Jones"
<!DOCTYPE html>
<html ng-app="plunker">

  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
    document.write('<base href="' + document.location + '" />');
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="" data-semver="1.4.9"></script>
  <script src="app.js"></script>

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download