How to use ng-repeat for dictionaries in AngularJs

Question

I know that we can easily use ng-repeat for json objects or arrays like    lt div ng-repeat  user in users  gt  lt  div gt    but how can we use the ng-repeat for dictionaries  for example   var users   null  users  182982          json-object       users  198784          json-object       users  119827          json-object         I want to use that with users dictionary    lt div ng-repeat  user in users  gt  lt  div gt    Is it possible   If yes  how can I do it in AngularJs   Example for my question  In C  we define dictionaries like   Dictionary lt key value gt  dict   new Dictionary lt key value gt        and then we can search for values  without knowing the keys foreach var val in dict Values        Is there a build-in function that returns the values from a dictionary like in c

User · Answer

In Angular 7  the following simple example would work  assuming dictionary is in a variable called d    my component ts   keys  string             declaration of class member  keys     component code      this keys   Object keys d     my component html    will display list of key value pairs    lt ul  ngFor  let key of keys  gt        key      d key     lt  ul gt

User · Answer

JavaScript developers tend to refer to the above data-structure as either an object or hash instead of a Dictionary   Your syntax above is wrong as you are initializing the users object as null   I presume this is a typo  as the code should read      Initialize users as a new hash  var users       users  182982              To retrieve all the values from a hash  you need to iterate over it using a for loop   function getValues  hash        var values           for  var key in hash                Ensure that the  key  is actually a member of the hash and not            a member of the  prototype              see  http   javascript crockford com code html for 20statement         if  hash hasOwnProperty key                 values push key                       return values       If you plan on doing a lot of work with data-structures in JavaScript then the underscore js library is definitely worth a look   Underscore comes with a values method which will perform the above task for you   var values     values users     I don t use Angular myself  but I m pretty sure there will be a convenience method build in for iterating over a hash s values  ah  there we go  Artem Andreev provides the answer above

User · Answer

You can use   lt li ng-repeat   name  age  in items  gt   name      age   lt  li gt    See ngRepeat documentation  Example  http   jsfiddle net WRtqV 1

User · Answer

I would also like to mention a new functionality of AngularJS ng-repeat  namely  special repeat start and end points  That functionality was added in order to repeat a series of HTML elements instead of just a single parent HTML element   In order to use repeater start and end points you have to define them by using ng-repeat-start and ng-repeat-end directives respectively    The ng-repeat-start directive works very similar to ng-repeat directive  The difference is that is will repeat all the HTML elements  including the tag it s defined on  up to the ending HTML tag where ng-repeat-end is placed  including the tag with ng-repeat-end    Sample code  from a controller             scope users        scope users  182982      name  John   age  30    scope users  198784      name  Antonio   age  32    scope users  119827      name  Stephan   age  18            Sample HTML template     lt div ng-repeat-start   id  user  in users  gt           User details       lt  div gt   lt div gt       lt span gt    index 1     lt  span gt       lt strong gt   id    lt  strong gt       lt span class  name  gt   user name    lt  span gt       lt span class  age  gt    user age    lt  span gt   lt  div gt    lt div ng-if    first  gt      lt img src   some image jpg  alt  some img  title  some img    gt   lt  div gt   lt div ng-repeat-end gt                              lt  div gt    Output would look similar to the following  depending on HTML styling         User details      1   119827 Stephan  18                              User details      2   182982 John  30   sample image goes here                              User details      3   198784 Antonio  32   sample image goes here                           As you can see  ng-repeat-start repeats all HTML elements  including the element with ng-repeat-start   All ng-repeat special properties  in this case  first and  index  also work as expected

[angularjs] How to use ng-repeat for dictionaries in AngularJs?

Examples related to angularjs

Examples related to json

Examples related to dictionary

Examples related to angularjs-ng-repeat