angularjs : iterate array with key value pairs

Question

I am creating an array like the following:

var arr =[];
arr['key1'] = 'value1';
arr['key2'] = 'value2';

If is use this array in ng-repeat tag, it is not displaying anything. Is there any way to make it work?

<div data-ng-repeat='(key,value) in arr'>{{key}} - {{value}}</div>

Is there any way to make it work?

Answer 1

The way to go, is to creat plain object (instead of array)

// instead of creatin of an Array
// $scope.myArr = [];
// we just create plain object
$scope.myArr = {};
...
// here we just add properties (key/value)
$scope.myArr['attempt1'] = {};
...
// which is in this case same as this syntax
$scope.myArr.attempt1 = {};

Thee is updated plunker

Check more details what is behind for example here:

Javascript: Understanding Objects vs Arrays and When to Use Them. [Part 1]

Answer 2

Your associative array is nothing but an object, as far as JavaScript is concerned. IMO Associative arrays and Objects are almost same.

Ex: Your arr['key1'] = 'value1'; can be called as console.log(arr.key1);

To make your code work, you need to change the array declaration by removing [] and replacing with {} (Curly braces)

Like this var arr = {};