Why cant I iterate over this JavaScript object?

Question

I have this javascript object..

var obj = {
    '02/08/2016': 2,
    '03/10/2016': 4,
    '04/05/2016': 2,
    '04/06/2016': 35,
    '04/19/2016': 4,
    '04/26/2016': 22,
    '05/09/2016': 15,
    '05/24/2016': 2,
    '05/30/2016': 4,
    '07/14/2016': 7,
    '08/18/2016': 200
};

// Does not work
$(obj).each(function(index,value) {
  console.log(index);
  console.log(value);
});

// Does not work, also what does putting it in bracket notation do here?
var labels = $.map(obj, function(index, value) { 
   return [index];  
});

Why can I not iterate the object? I am trying to place this data in two separate arrays (like below) for chart.js

var arr1 = ['02/08/2016', '03/10/2016', '04/05/2016', ..];
var arr2 = [2, 4, 2, ...];

Code Fiddle: https://jsfiddle.net/zjgb6ez4/

Answer 1

The issue with your logic is, $.each() has two signatures:

$(selector).each(function(index,value) {...} // For HTML DOM selectors.
$.each(obj, function(index,value) {...}      // For JavaScript Objects & Arrays.

What you have used is for jQuery selectors, DOM Iteration. This way is specifically for iterating JavaScript Objects or Arrays.

Also, since you need two arrays. You can't use each or map function for this, as they return only one array. Instead, it is better to use Object.keys and Object.values() :

 var obj = { '02/08/2016': 2, '03/10/2016': 4, '04/05/2016': 2, '04/06/2016': 35, '04/19/2016': 4, '04/26/2016': 22, '05/09/2016': 15, '05/24/2016': 2, '05/30/2016': 4, '07/14/2016': 7, '08/18/2016': 200 }; var arr1 = Object.keys(obj); var arr2 = Object.values(obj); console.log(arr1); console.log(arr2); 

Note: Object.values() is an experimental technology. Because this technology's specification has not stabilised, check the compatibility table for usage in various browsers. Also note that the syntax and behaviour of an experimental technology is subject to change in future versions of browsers as the specification changes.

Without Object.values()

 var obj = { '02/08/2016': 2, '03/10/2016': 4, '04/05/2016': 2, '04/06/2016': 35, '04/19/2016': 4, '04/26/2016': 22, '05/09/2016': 15, '05/24/2016': 2, '05/30/2016': 4, '07/14/2016': 7, '08/18/2016': 200 }; var arr1 = Object.keys(obj); var arr2 = arr1.map(function (v) { return obj[v]; }); console.log(arr1); console.log(arr2); 

Answer 2

Using jQuery to iterate over a plain object you need to use $.each() .

$.each(obj, function(index,value) {...}

A pure Javascript solution might be:

for (var index in obj) {
    console.log(index);
    console.log(obj[index]);
}

Answer 3

You can use the keys() and values() methods on Object .

var obj = {
    '02/08/2016': 2,
    '03/10/2016': 4,
    '04/05/2016': 2,
    '04/06/2016': 35,
    '04/19/2016': 4,
    '04/26/2016': 22,
    '05/09/2016': 15,
    '05/24/2016': 2,
    '05/30/2016': 4,
    '07/14/2016': 7,
    '08/18/2016': 200
};
var arr1 = Object.keys(obj);
var arr2 = Object.values(obj);

This is plain JavaScript solution, without jQuery. But note that values() method is not supported in all browsers yet.