{"id":21,"date":"2016-01-09T13:48:46","date_gmt":"2016-01-09T13:48:46","guid":{"rendered":"http:\/\/muthu.co\/?p=21"},"modified":"2021-01-02T14:06:16","modified_gmt":"2021-01-02T14:06:16","slug":"angular-ng-repeat-on-object-and-arrays","status":"publish","type":"post","link":"http:\/\/write.muthu.co\/angular-ng-repeat-on-object-and-arrays\/","title":{"rendered":"Angular ng-repeat on object and arrays"},"content":{"rendered":"

 <\/p>\n

ng-repeat is similar to a for loop in javascript which lets you loop through an array of objects or values and print the information in html.<\/p>\n

For example: Suppose\u00a0we have an array of people,<\/p>\n

$scope.people = [\"Max\",\"Gene\",\"Rose\"];<\/code><\/p>\n

To print these values in a <p> tag would have a syntax something like the one shown below.<\/p>\n

<p ng-repeat=\"p in people\">\r\n{{p}}\r\n<\/p>\r\n\r\n<\/pre>\n
What if we had an array of objects,<\/p>\n
$scope.people = [{\r\n           \"name\" : \"Max\",\r\n           \"gender\" : \"Male\"\r\n       },{\r\n            \"name\" : \"Gene\",\r\n            \"gender\" : \"Male\"\r\n       },{\r\n            \"name\" : \"Rose\",\r\n            \"gender\" : \"Female\"\r\n       }];<\/pre>\n
Our ng-repeat would look something like this<\/p>\n
<p ng-repeat=\"p in people\">\r\n{{p.name}} is a {{p.gender}}\r\n<\/p><\/pre>\n
While it was easy to loop through an array of values and objects using an ng-repeat, running a loop in an object is a little different.<\/p>\n
Suppose we have an object person<\/p>\n
$scope.person = {\r\n   \"name\" : \"Max\",\r\n   \"gender\" : \"Male\",\r\n    \"age\" : \"28\"\r\n}<\/pre>\n
We can print the object values using an ng-repeat like this<\/p>\n
<p ng-repeat=\"(key,value) in people\">\r\n{{key}} : {{value}}\r\n<\/p><\/pre>\n
The above code would produce an output which would look something like this:<\/p>\n
name : Max\r\ngender : Male\r\nage : 28<\/pre>\n","protected":false},"excerpt":{"rendered":"
  ng-repeat is similar to a for loop in javascript which lets you loop through an array of objects or values and print the information in html. For example: Suppose\u00a0we have an array of people, $scope.people = [“Max”,”Gene”,”Rose”]; To print these values in a <p> tag would have a syntax something like the one shown […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[52,3,4],"_links":{"self":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/21"}],"collection":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":1,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":1680,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/21\/revisions\/1680"}],"wp:attachment":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}