w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Script Angularjs
Iterate javascript object keys using angularjs ngRepeat

Iterate javascript object keys using angularjs ngRepeat

W3TWEAKS by W3TWEAKS
October 27, 2020
in Angularjs
0

This tutorial will explain how to get or iterate the JavaScript Object keys / Properties using AngularJs ngRepeat.

It is viable to get ngRepeat to iterate over the houses of an object using the subsequent syntax:

You might also like

Enable and Disable drop down box using angularjs ngDisabled

Enable and Disable drop down box using angularjs ngDisabled

November 26, 2019
0
Select all and Deselect all checkboxes in angularjs

Select all and Deselect all checkboxes in angularjs

October 22, 2021
0
<div ng-repeat="(key, value) in myObj"> ... </div>

ng-repeat for iterate the javascript object properties

Below code will iterate the object keys using ng-repeat

<html ng-app="objectKeyIteration" ng-controller="mainController">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script>
            var app = angular.module('objectKeyIteration',[]);

            app.controller('mainController',['$scope',function($scope){
                $scope.title = "Iterate javascript object key using angularjs ngRepeat";
                $scope.data = {
                    "id":1,
                    "name":"Object Key Iteration",
                    "framework": "angularJS 1.5"
                };
            }]);
        </script>
        <title>{{title}}</title>
    </head>
    <body>
        <div ng-repeat="(key, value) in data">
            <div><strong>{{key}}</strong> : {{value}}</div>
        </div>
    </body>
</html>

However, there are a few limitations compared to array iteration:

  • The JavaScript specification does not define the order of keys returned for an object, so AngularJS relies on the order returned by the browser when running for key in myObj. Browsers generally follow the strategy of providing keys in the order in which they were defined, although there are exceptions when keys are deleted and reinstated. See the MDN page on delete for more info.
  • ngRepeat will silently ignore object keys starting with $, because it’s a prefix used by AngularJS for the public ($) and private ($$) properties.
  • The built-in filters orderBy and filter do not work with objects and will throw an error if used with one.

If you are hitting any of these limitations, the recommended workaround is to convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat. You could do this with a filter such as toArrayFilter or implement a $watch on the object yourself.

Demo

Tags: AngularjsIterateJavascriptkeysng-repeatngRepeatobjectproperties
Previous Post

How to import joomla modules inside any custom components

Next Post

3d Social Icons with animation using CSS3

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Enable and Disable drop down box using angularjs ngDisabled

Enable and Disable drop down box using angularjs ngDisabled

by W3TWEAKS
November 26, 2019
0
0

In AngularJs we can able to disable or enable the dropdown like jQuery does. Using ngDisabled function in angularjs we...

Select all and Deselect all checkboxes in angularjs

Select all and Deselect all checkboxes in angularjs

by W3TWEAKS
October 22, 2021
0
0

This tutorial will explain how to achieve check all and uncheck all checkbox using angularjs and listing all checked values...

Angularjs and JSON list infinite scroll

Angularjs and JSON list infinite scroll

by Vetrivel Pandian
September 19, 2019
0
0

JSON is more better way to transmitting the data in server to client. When you have develop large data application,...

Angularjs Jasmine Service Dependency Injection

Angularjs Jasmine Service Dependency Injection

by W3TWEAKS
November 26, 2019
0
0

This tutorial will explain how to write the Jasmine unit test case for angularjs service dependency injection. End of the...

Next Post
3d Social Icons with animation using CSS3

3d Social Icons with animation using CSS3

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube