How to get array key name using jQuery?

Question

I have an array like this:

var myArray = new Array();

myArray['foo'] = {
    Obj: {
        key: value
    }
};
myArray['bar'] = {
    Obj: {
        key: value
    }
};

When I do console.log(myArray) I just get empty [ ] . And when I try to iterate the array using jQuery's each the function doesn't run.

How can I get the 'foo' and 'bar' parts of the array?

Example code:

console.log(myArray); // [ ]

jQuery.each(myArray, function(key, obj) {
    console.log(key); // should be 'foo' following by 'bar'
});

In addition, why does this work:

jQuery.each(myArray[foo], function(obj, values) {

    // Why does this work if there are no associative arrays in JS?

});

Answer 1

you can get keys by:

Object.keys(variable name);

it returns array of keys.

Answer 2

Array is a collection where each element has an index. To add element to array you can use push method

 myArray.push('someValue');

or set element by index (if length of array < index):

 myArray.push('someValue1');
 myArray.push('someValue1');
 myArray[0] = 'new someValue1';

Note that array is an instance of Object class, so you can add/edit any property of this object:

myArray.foo = '1';
myArray['bar'] = '2';

In this case you will not add new element to array, you defining new properties of object. And you don't need to create object as Array if you don't wont to use indexes. To create new object use this code:

var myObj = {};

To get all properties of object see How to get all properties values of a Javascript Object (without knowing the keys)?

Answer 3

You need to define it as an object if you want to access it like that:

var myObj= {};

myObj.foo = ...;
myObj.bar = ...;

Now you can access the properties like myObj["bar"] or myObj.bar

Note:
To loop through all the properties it's wise to add an additional check. This is to prevent you from looping through inherited properties.

for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        // Do stuff.
    }
}

Answer 4

var myArray = {};

myArray['foo'] = {  'key': 'value'  }

myArray['bar'] ={  'key': 'value'  }

console.log(myArray)

jQuery.each(myArray['foo'], function(obj, values) {

   console.log(obj, values)

});

Demo

Answer 5

With your Array of Objects you could use this function:

var getKeys = function(obj) {
  if (!(typeof obj == "object")) return [];
  var keys = [];
  for (var key in obj) if (obj != null && hasOwnProperty.call(obj, key)) keys.push(key);
  return keys;
};

getKeys(myArray) would give you an array of your Keys.

This is basically a cleared up version of underscores _.keys(myArray) function. You should consider using underscore.

Answer 6

// $.each() function can be used to iterate over any collection, whether it is an object or an array.

var myArray = {};
myArray['alfa'] = 0;
myArray['beta'] = 1;
$.each(myArray, function(key, value) {
      alert(key);
});

Note: checkout http://api.jquery.com/jQuery.each/ for more information.