How to iterate over the keys and values with ng-repeat in AngularJS

Question

In my controller  I have data like   scope object   data  Now this data is the dictionary with keys and values from json   I can access the attribute with object name in the template  Is there any way that I can iterate over the keys as well and display them in table like   lt tr gt  lt td gt    key    lt  td gt   lt td gt  data key  lt  td gt   The data is like this         id   2       project    wewe2012        date    2013-02-26        description    ewew        eet no    ewew

User · Answer

A todo list example which loops over object by ng-repeat    x000D   x000D  var app   angular module  toDolistApp        x000D  app controller  toDoListCntrl   function     x000D    var self   this  x000D    self toDoListItems               dont use square brackets if keys are string rather than numbers  x000D    self doListCounter   0  x000D   x000D    self addToDoList   function              x000D      var newToDoItem       x000D      newToDoItem title       self toDoEntry  x000D      newToDoItem completed   false       x000D   x000D      var keyIs    key     self doListCounter           x000D   x000D      self toDoListItems keyIs    newToDoItem       x000D      self toDoEntry         after adding the item make the input box blank  x000D       x000D      x000D   x000D  app filter  propsCounter   function     x000D    return function input    x000D      return Object keys input  length  x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt body ng-app  toDolistApp  gt      x000D     lt div ng-controller  toDoListCntrl as toDoListCntrlAs  gt  x000D      Total Items    toDoListCntrlAs toDoListItems   propsCounter   lt br   gt  x000D      Enter todo Item    lt input type  text  ng-model  toDoListCntrlAs toDoEntry   gt  x000D       lt span gt   toDoListCntrlAs toDoEntry   lt  span gt  x000D       lt button ng-click  toDoListCntrlAs addToDoList    gt Add Item lt  button gt   lt br  gt  x000D       lt div ng-repeat   key  prop  in toDoListCntrlAs toDoListItems  gt   x000D         lt span gt    index 1       key       Title      prop title     Status      prop completed    lt  span gt  x000D       lt  div gt       x000D     lt  div gt      x000D   lt  body gt  x000D   x000D   x000D

User · Answer

How about    lt table gt     lt tr ng-repeat   key  value  in data  gt       lt td gt    key    lt  td gt   lt td gt     value     lt  td gt     lt  tr gt   lt  table gt    This method is listed in the docs  https   docs angularjs org api ng directive ngRepeat

User · Answer

If you would like to edit the property value with two way binding    lt tr ng-repeat   key  value  in data  gt       lt td gt   key   lt input type  text  ng-model  data key   gt  lt  td gt   lt  tr gt

User · Answer

You can do it in your javascript  controller  or in your html  angular view      js    scope arr       for   p in data        scope arr push p        html    lt tr ng-repeat   k  v  in data  gt       lt td gt   k   lt input type  text  ng-model  data k   gt  lt  td gt   lt  tr gt    I believe the html way is more angular   but you can also do in your controller and retrieve it in your html     also not a bad idea to look at the Object keys  they give you the an array of the keys if you need them  more info here   https   developer mozilla org en docs Web JavaScript Reference Global Objects Object keys

User · Answer

Complete example here -   lt  DOCTYPE html  gt   lt html ng-app  dashboard  gt   lt head gt   lt title gt AngularJS lt  title gt   lt script src  https   ajax googleapis com ajax libs jquery 2 2 4 jquery min js  gt  lt  script gt   lt link rel  stylesheet  href    bootstrap min css  gt   lt script src    bootstrap min js  gt  lt  script gt   lt script src  https   ajax googleapis com ajax libs angularjs 1 4 4 angular min js  gt  lt  script gt   lt  head gt   lt body ng-controller  myController  gt       lt table border  1  gt           lt tr ng-repeat   key val  in collValues  gt               lt td ng-if   hasChildren val   gt   key   lt  td gt                 lt td ng-if  val      string   gt                   lt input type  text  name    key    gt  lt  input gt               lt  td gt               lt td ng-if  val      number   gt                   lt input type  number  name    key    gt  lt  input gt               lt  td gt               lt td ng-if  hasChildren val   td colspan  2  gt                   lt table border  1  ng-repeat  arrVal in val  gt                       lt tr ng-repeat   key val  in arrVal  gt                           lt td gt   key   lt  td gt                               lt td ng-if  val      string   gt                               lt input type  text  name    key    gt  lt  input gt                           lt  td gt                           lt td ng-if  val      number   gt                               lt input type  number  name    key    gt  lt  input gt                           lt  td gt                       lt  tr gt                   lt  table gt                               lt  td gt            lt  tr gt              lt  table gt   lt  body gt    lt script type  text javascript  gt       var app   angular module  dashboard           app controller  myController  function  scope            scope collValues                  name   string                id   string                phone   number                depart                                                   depart   string                            name   string                                                               scope hasChildren   function bigL1                return angular isArray bigL1               lt  script gt   lt  html gt

User · Answer

I don t think there s a builtin function in angular for doing this  but you can do this by creating a separate scope property containing all the header names  and you can fill this property automatically like this   var data       foo   a     bar   b       scope objectHeaders        for   property in data        scope objectHeaders push property          Output     foo    bar

User · Answer

Here s a working example    lt div class  item item-text-wrap  ng-repeat   key value  in form list  gt     lt b gt   key   lt  b gt      value    lt  div gt    edited

User · Answer

we can follow below procedure to avoid display of key-values in alphabetical order   Javascript   scope data         id   2      project    wewe2012       date    2013-02-26       description    ewew       eet no    ewew      var array       for var key in  scope data       var test           test key   scope data key       array push test      scope data   array    HTML   lt p ng-repeat  obj in data  gt      lt font ng-repeat   key  value  in obj  gt          key       value       lt  font gt   lt  p gt

User · Answer

Use below code it is working to display your key and value here is key start with 1            lt tr ng-repeat   key value  in alert list   gt                      lt td gt   key  1   lt  td gt                      lt td gt   value title   lt  td gt                    lt  tr gt  Below is document link for it     https   docs angularjs org api ng directive ngRepeat

[angularjs] How to iterate over the keys and values with ng-repeat in AngularJS?

Examples related to angularjs

Examples related to angularjs-ng-repeat