Create Table from JSON Data with angularjs and ng-repeat

Question

I have the following data as JSON:

{
  "Workout1": {
    "Name": "First",
    "Rounds": [
      {
        "Exercises": [
          {
            "Name": "Exercise1",
            "Repeat": 10
          },
          {
            "Name": "Exercise2",
            "Repeat": 10
          },
          {
            "Name": "Exercise3",
            "Repeat": 10
          }
        ]
      },
      {
        "Exercises": [
          {
            "Name": "Exercise1",
            "Repeat": 20
          },
          {
            "Name": "Exercise2",
            "Repeat": 20
          },
          {
            "Name": "Exercise3",
            "Repeat": 20
          }
        ]
      },
      {
        "Exercises": [
          {
            "Name": "Exercise1",
            "Repeat": 30
          },
          {
            "Name": "Exercise2",
            "Repeat": 30
          },
          {
            "Name": "Exercise3",
            "Repeat": 30
          }
        ]
      }
    ]
  }
}

and I want to display it as a html table with angularjs and ng-repeat. so that I get the following table:

<table class="table">
    <tr>
        <th>Round1</th>
        <th>Round2</th>
        <th>Round3</th>
    </tr>
    <tr>
        <td>10 Exercise1</td>
        <td>20 Exercise1</td>
        <td>30 Exercise1</td>
    </tr>
    <tr>
        <td>10 Exercise2</td>
        <td>20 Exercise2</td>
        <td>30 Exercise2</td>
    </tr>
    <tr>
        <td>10 Exercise3</td>
        <td>20 Exercise3</td>
        <td>30 Exercise3</td>
    </tr>
</table>

for table preview: http://jsfiddle.net/54pD8/

my problem that the html table is working row-based. I can iterate with ng-repeat through my Rounds and then through my excercises but for creating a table I need always the first of each exercises then the second of each exercises and so on.

Can someone help me with this problem?

ps. if you have an idea for better layout for this data in json, your suggestions are welcome, I'm new to json (and angularjs).

updated the example below to use table and not li. Please note ng:repeat is still used. — Tony Cronin
– Tony Cronin, Commented Mar 6, 2014 at 16:48

Tony Cronin · Accepted Answer · 2017-05-27 08:48:04Z

30

The solution you are looking for is in Angular's official tutorial. In this tutorial Phones are loaded from a JSON file using Angulars $http service . In the code below we use $http.get to load a phones.json file saved in the phones directory:

var phonecatApp = angular.module('phonecatApp', []);   
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
 $http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
}); 
$scope.orderProp = 'age';
});

We then iterate over the phones:

<table>
  <tbody ng-repeat="i in phones">
    <tr><td>{{i.name}}</td><td>{{$index}}</td></tr>
    <tr ng-repeat="e in i.details">
       <td>{{$index}}</td>
       <td>{{e.foo}}</td>
       <td>{{e.bar}}</td></tr>
  </tbody>
</table>

edited May 27, 2017 at 8:48

answered Mar 5, 2014 at 21:09

Tony Cronin

1,6611 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1616332 Over a year ago

I have tried it with the same code and it worked with a list but i neeed a table!

Slopes Over a year ago

I'm not sure if this is due to an update on Angular or if it was a typo, but I believe the ng:repeat should be ng-repeat. I'm getting an error when I use ng:repeat but it works with ng-repeat. I'm using the method that includes the external google script: <script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.5/…> Thank you!

Ori Lentz · Accepted Answer · 2016-02-21 06:38:52Z

Easy way to use for create dynamic header and cell in normal table :

<table width="100%" class="table">
 <thead>
  <tr>
   <th ng-repeat="(header, value) in MyRecCollection[0]">{{header}}</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="row in MyRecCollection | filter:searchText">
   <td ng-repeat="cell in row">{{cell}}</td>
  </tr>
 </tbody>
</table>

MyApp.controller('dataShow', function ($scope, $http) {
    //$scope.gridheader = ['Name','City','Country']
        $http.get('http://www.w3schools.com/website/Customers_MYSQL.php').success(function (data) {

                $scope.MyRecCollection = data;
        })

        });

JSON Data :

[{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
}, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
}, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
}, {
    "Name": "Ernst Handel",
    "City": "Graz",
    "Country": "Austria"
}, {
    "Name": "FISSA Fabrica Inter. Salchichas S.A.",
    "City": "Madrid",
    "Country": "Spain"
}, {
    "Name": "Galería del gastrónomo",
    "City": "Barcelona",
    "Country": "Spain"
}, {
    "Name": "Island Trading",
    "City": "Cowes",
    "Country": "UK"
}, {
    "Name": "Königlich Essen",
    "City": "Brandenburg",
    "Country": "Germany"
}, {
    "Name": "Laughing Bacchus Wine Cellars",
    "City": "Vancouver",
    "Country": "Canada"
}, {
    "Name": "Magazzini Alimentari Riuniti",
    "City": "Bergamo",
    "Country": "Italy"
}, {
    "Name": "North/South",
    "City": "London",
    "Country": "UK"
}, {
    "Name": "Paris spécialités",
    "City": "Paris",
    "Country": "France"
}, {
    "Name": "Rattlesnake Canyon Grocery",
    "City": "Albuquerque",
    "Country": "USA"
}, {
    "Name": "Simons bistro",
    "City": "København",
    "Country": "Denmark"
}, {
    "Name": "The Big Cheese",
    "City": "Portland",
    "Country": "USA"
}, {
    "Name": "Vaffeljernet",
    "City": "Århus",
    "Country": "Denmark"
}, {
    "Name": "Wolski Zajazd",
    "City": "Warszawa",
    "Country": "Poland"
}]

Sga · Accepted Answer · 2015-10-12 08:39:21Z

To create HTML table using JSON, we will use ngRepeat directive of AngularJS.

Example

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td></tr>
</table>
</div>
</body>
</html>

JavaScript

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
    $scope.names = [
      { "Name" : "Max Joe", "City" : "Lulea", "Country" : "Sweden" },
      { "Name" : "Manish", "City" : "Delhi", "Country" : "India" },
      { "Name" : "Koniglich", "City" : "Barcelona", "Country" : "Spain" },
      { "Name" : "Wolski", "City" : "Arhus", "Country" : "Denmark" }
    ];
});

In above example I have created table from json. I have taken reference from http://www.tutsway.com/create-html-table-using-json-in-angular-js.php

balazs630 · Accepted Answer · 2017-09-28 14:24:47Z

2

Angular 2 or 4:

There's no more ng-repeat, it's *ngFor now in recent Angular versions!

<table style="padding: 20px; width: 60%;">
    <tr>
      <th  align="left">id</th>
      <th  align="left">status</th>
      <th  align="left">name</th>
    </tr>
    <tr *ngFor="let item of myJSONArray">
      <td>{{item.id}}</td>
      <td>{{item.status}}</td>
      <td>{{item.name}}</td>
    </tr>
</table>

Used this simple JSON:

[{"id":1,"status":"active","name":"A"},
{"id":2,"status":"live","name":"B"},
{"id":3,"status":"active","name":"C"},
{"id":6,"status":"deleted","name":"D"},
{"id":4,"status":"live","name":"E"},
{"id":5,"status":"active","name":"F"}]

edited Sep 28, 2017 at 14:24

answered Sep 28, 2017 at 14:18

balazs630

3,73533 silver badges51 bronze badges

Comments

Ali Adravi · Accepted Answer · 2018-08-07 14:13:54Z

2

To render any json in tabular format:

<table>
    <thead>
      <tr>
        <th ng-repeat="(key, value) in vm.records[0]">{{key}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="(key, value) in vm.records">
        <td ng-repeat="(key, value) in value">
          {{value}}
        </td>
      </tr>
    </tbody>
</table>

See complete code in detail with other features

answered Aug 7, 2018 at 14:13

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Comments

Brad Larson · Accepted Answer · 2017-05-30 19:50:19Z

0

You can use $http.get() method to fetch your JSON file. Then assign response data to a $scope object. In HTML to create table use ng-repeat for $scope object. ng-repeat will loop the rows in-side this loop you can bind data to columns dynamically.

I have checked your code and you have created static table

<table>
<tr>
<th>Name</th>
<th>Relationship</th>
</tr>
<tr ng-repeat="indivisual in members">
<td>{{ indivisual.Name }}</td>
<td>{{ indivisual.Relation }}</td>
</tr>
</table>

so better your can go to my code to create dynamic table as per data you column and row will be increase or decrease..

edited May 30, 2017 at 19:50

Brad Larson

170k45 gold badges401 silver badges574 bronze badges

answered Apr 25, 2015 at 4:24

Biswabhusan Panda

13 bronze badges

1 Comment

SantoshK Over a year ago

Th is static in your code.. it should be dynamic as per data increase the column

Collectives™ on Stack Overflow

Create Table from JSON Data with angularjs and ng-repeat

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related