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    lt table class  table  gt       lt tr gt           lt th gt Round1 lt  th gt           lt th gt Round2 lt  th gt           lt th gt Round3 lt  th gt       lt  tr gt       lt tr gt           lt td gt 10 Exercise1 lt  td gt           lt td gt 20 Exercise1 lt  td gt           lt td gt 30 Exercise1 lt  td gt       lt  tr gt       lt tr gt           lt td gt 10 Exercise2 lt  td gt           lt td gt 20 Exercise2 lt  td gt           lt td gt 30 Exercise2 lt  td gt       lt  tr gt       lt tr gt           lt td gt 10 Exercise3 lt  td gt           lt td gt 20 Exercise3 lt  td gt           lt td gt 30 Exercise3 lt  td gt       lt  tr gt   lt  table gt    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

User · Answer

To create HTML table using JSON  we will use ngRepeat directive of AngularJS   Example  HTML   lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src    ajax googleapis com ajax libs angularjs 1 3 0-beta 1 angular min js  gt  lt  script gt   lt  head gt   lt body gt   lt div ng-app  myApp  ng-controller  customersCtrl  gt   lt table border  1  gt   lt tr ng-repeat  x in names  gt   lt td gt   x Name   lt  td gt   lt td gt   x City   lt  td gt   lt td gt   x Country   lt  td gt  lt  tr gt   lt  table gt   lt  div gt   lt  body gt   lt  html gt    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

User · Answer

Angular 2 or 4   There s no more ng-repeat  it s  ngFor now in recent Angular versions    lt table style  padding  20px  width  60    gt       lt tr gt         lt th  align  left  gt id lt  th gt         lt th  align  left  gt status lt  th gt         lt th  align  left  gt name lt  th gt       lt  tr gt       lt tr  ngFor  let item of myJSONArray  gt         lt td gt   item id   lt  td gt         lt td gt   item status   lt  td gt         lt td gt   item name   lt  td gt       lt  tr gt   lt  table gt    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

User · Answer

Easy way to use for create dynamic header and cell in normal table     lt table width  100   class  table  gt    lt thead gt     lt tr gt      lt th ng-repeat   header  value  in MyRecCollection 0   gt   header   lt  th gt     lt  tr gt    lt  thead gt    lt tbody gt     lt tr ng-repeat  row in MyRecCollection   filter searchText  gt      lt td ng-repeat  cell in row  gt   cell   lt  td gt     lt  tr gt    lt  tbody gt   lt  table gt   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

User · Answer

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    lt table gt     lt tbody ng-repeat  i in phones  gt       lt tr gt  lt td gt   i name   lt  td gt  lt td gt    index   lt  td gt  lt  tr gt       lt tr ng-repeat  e in i details  gt          lt td gt    index   lt  td gt          lt td gt   e foo   lt  td gt          lt td gt   e bar   lt  td gt  lt  tr gt     lt  tbody gt   lt  table gt

User · Answer

To render any json in tabular format    lt table gt       lt thead gt         lt tr gt           lt th ng-repeat   key  value  in vm records 0   gt   key   lt  th gt         lt  tr gt       lt  thead gt       lt tbody gt         lt tr ng-repeat   key  value  in vm records  gt           lt td ng-repeat   key  value  in value  gt              value            lt  td gt         lt  tr gt       lt  tbody gt   lt  table gt    See complete code in detail with other features

User · Answer

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   lt table gt   lt tr gt   lt th gt Name lt  th gt   lt th gt Relationship lt  th gt   lt  tr gt   lt tr ng-repeat  indivisual in members  gt   lt td gt    indivisual Name    lt  td gt   lt td gt    indivisual Relation    lt  td gt   lt  tr gt   lt  table gt    so better your can go to my code to create dynamic table as per data you column and row will be increase or decrease

[javascript] Create Table from JSON Data with angularjs and ng-repeat

Examples related to javascript

Examples related to html

Examples related to json

Examples related to angularjs